Sidebar

Sidebar

Component preview

A persistent region beside primary content that participates in page layout and usually contains navigation or supporting tools.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: side navigation, navigation rail, aside

navigation that stays on the left
a permanent column beside the page
keep project sections visible while I work
a side menu that moves content instead of covering it
desktop navigation in a narrow left rail
a fixed area for folders and shortcuts

Try it

Edge-attached surfaces

Compare all three behaviors

Shared comparison scenario: A workspace places supporting navigation or controls along a screen edge while the main task stays in context.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Your task

Choose Chairs in the persistent category navigation, collapse the sidebar, and verify the furniture results reflow without losing focus.

Edge case to verify

Below the wide breakpoint, the persistent filters disappear and a separately named menu opens temporary category navigation for the same results.

Mission

Choose Chairs in the persistent category navigation, collapse the sidebar, and verify the furniture results reflow without losing focus.

Primary state: The persistent category navigation occupies stable layout width beside the same furniture list, marks the current category, and never makes results inert.

All furniture

All office furniture results are displayed.

12 results

Office furniture

Compact desk
In stock
Adjustable chair
Made to order

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Use it when

Navigating stable sections of a desktop workspace
Keeping folders or filters visible during repeated work

Avoid it when

The surface is needed only briefly
The remaining content becomes too narrow or horizontally scrolls

Compare similar concepts

A Drawer is temporary and overlays content; a Sidebar stays in the layout, while a Bottom sheet is anchored to the bottom and supports mobile drag behavior.

Drawer

Bottom sheet is bottom-anchored and may be draggable; Drawer uses a defined side edge, while Sidebar remains part of the persistent layout.

Bottom sheet

Technical details

Behaviors

Remain in layout
The region occupies page layout space instead of temporarily covering primary content.
Adapt at narrow widths
At narrow widths the persistent region collapses or becomes a separate temporary navigation control.

States

Sidebar expanded
Sidebar expanded
Sidebar compact
Sidebar compact

State transitions

Sidebar expanded → Sidebar compact
The collapse control is activated while the persistent sidebar is expanded.
Sidebar compact → Sidebar expanded
The expand control is activated while the persistent sidebar is compact.

Test scenarios

Context: An office-furniture results page shows the same Compact desk and Adjustable chair list while people filter availability and navigate categories without leaving the results.
Mission: Choose Chairs in the persistent category navigation, collapse the sidebar, and verify the furniture results reflow without losing focus.
Primary state: The persistent category navigation occupies stable layout width beside the same furniture list, marks the current category, and never makes results inert.
Edge case: Below the wide breakpoint, the persistent filters disappear and a separately named menu opens temporary category navigation for the same results.

Accessibility

Role: aside containing a named navigation region
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: Focus moves normally between the sidebar and main content; collapse preserves a logical focused control.
Dismissal: A persistent sidebar is collapsed, not dismissed; any temporary mobile counterpart follows its own Drawer dismissal contract.
Scroll: The document and sidebar keep independent, predictable overflow. Keyboard focus is never hidden by sticky content while the page scrolls.
Announcement: The navigation region has a unique name and the current destination uses aria-current when appropriate.
Keyboard: Tab follows normal document order
Enter activates links and collapse controls
No focus trap is created

Bindings

aside with nav
implementationKind
custom
nativeElement
aside with nav
ariaPattern
complementary or navigation region
radixPrimitive
Not applicable
shadcnRecipe
Not applicable
runtimeDependency
Not applicable
packageName
Not applicable
exportName
Not applicable
exactVersion
Not applicable
status
exception
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: A persistent sidebar is layout and navigation, not a modal Dialog. A temporary mobile counterpart must be implemented as a separate Drawer behavior.
Verify binding source

Sources

WAI-ARIA 1.2: Roles Model
W3C WAI · standard · 2026-07-16
Claim covered: Sidebar: normative ARIA role definitions and constraints used to qualify the stated accessible role.
WCAG 2.2: Focus Appearance
W3C WAI · standard · 2026-07-16
Claim covered: Sidebar: WCAG focus appearance requirements used to qualify visible keyboard focus.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.

Sidebar

Choose Chairs in the persistent category navigation, collapse the sidebar, and verify the furniture results reflow without losing focus.

Primary state: The persistent category navigation occupies stable layout width beside the same furniture list, marks the current category, and never makes results inert.