An app navigation column with sections, items and a collapse control.
Selector: mui-sidebar
Import
import { Sidebar, SidebarSection, SidebarItem, SidebarTrigger } from '@mushilu-san/ui/layout';
PreviewCode
Loading example…
Overview
Sidebar is a role="navigation" landmark. expanded is a two-way model, and SidebarTrigger toggles it. When collapsed, the sidebar shrinks to a narrow strip, so keep an icon on every item.
Each item takes its text from label, and the text is shown only while the sidebar is expanded. Sections group related items under a label. The active item carries aria-current="page", so the current page is announced.
When to use
Primary navigation for an app with many sections.
A settings area with grouped links.
When not to use
Two to five top-level sections. Use tabs or a nav link group. Use Tabs instead.
Guidelines
Do
Use an icon and a label on every item, so collapsed items remain understandable.
Mark the current page with active.
Don't
Do not place more than one sidebar on the same page.
Accessibility
Roles and attributes
Element
Role
Notes
host
navigation
aria-label from label. Name it "Sidebar navigation" by default.
trigger
button
aria-expanded and a label that says "Collapse sidebar" or "Expand sidebar".
item
link or button (native)
aria-current="page" when active.
section label
—
Decorative (aria-hidden). Use a heading if the section must be announced.
Keyboard
Keys
Action
TabShift+Tab
Moves focus through the trigger and the items.
EnterSpace
Activates the focused item or trigger.
Keep the collapsed state visible. Do not hide the sidebar with display: none while it is still a navigation option.
API
Sidebar
Selector: mui-sidebar
Name
Type
Default
Description
label
string
'Sidebar navigation'
Accessible name of the navigation landmark. Default `Sidebar navigation`.
collapsible
boolean
true
Allows the trigger to collapse the sidebar. Default `true`. Accepts attribute presence, e.g. <… collapsible>.
Name
Type
Default
Description
expanded
boolean
true
Whether the sidebar shows its labels. Two-way bindable with `[(expanded)]`.
CSS parts
::part(root)
SidebarSection
Selector: mui-sidebar-section
Name
Type
Default
Description
label
string
''
Heading text for the section. Decorative in the accessibility tree.
Mushilu-San UI