Sidebar
Displays a sidebar to navigate inside the application
Theme
<sa-sidebar-wrapper>
<sa-sidebar>
<sa-sidebar-header>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div
class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<sa-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-header>
<sa-sidebar-content>
<sa-sidebar-group>
<sa-sidebar-group-label>Platform</sa-sidebar-group-label>
<sa-sidebar-group-content>
<sa-sidebar-menu>
@* Active item — points back at this page so it resolves as the active route. *@
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="layout-dashboard"/>
<span>Dashboard</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="ticket"/>
<span>Bookings</span>
</sa-sidebar-menu-link>
<sa-sidebar-menu-badge>12</sa-sidebar-menu-badge>
</sa-sidebar-menu-item>
@* Menu item with a nested sub-menu. *@
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="map-pinned"/>
<span>Destinations</span>
</sa-sidebar-menu-link>
<sa-sidebar-menu-sub>
<sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-link href="#"><span>Europe</span>
</sa-sidebar-menu-sub-link>
</sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-link href="#"><span>Asia Pacific</span>
</sa-sidebar-menu-sub-link>
</sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-link href="#"><span>The Americas</span>
</sa-sidebar-menu-sub-link>
</sa-sidebar-menu-sub-item>
</sa-sidebar-menu-sub>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="users"/>
<span>Customers</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-group-content>
</sa-sidebar-group>
<sa-sidebar-group>
<sa-sidebar-group-label>Operations</sa-sidebar-group-label>
<sa-sidebar-group-content>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="plane-takeoff"/>
<span>Flights</span>
</sa-sidebar-menu-link>
<sa-sidebar-menu-badge>3</sa-sidebar-menu-badge>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="hotel"/>
<span>Hotels</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="calendar-days"/>
<span>Itineraries</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-group-content>
</sa-sidebar-group>
<sa-sidebar-separator/>
<sa-sidebar-group>
<sa-sidebar-group-label>Insights</sa-sidebar-group-label>
<sa-sidebar-group-content>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="chart-line"/>
<span>Reports</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="file-text"/>
<span>Invoices</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-group-content>
</sa-sidebar-group>
</sa-sidebar-content>
<sa-sidebar-footer>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-dropdown-menu id="nav-user-menu">
<sa-sidebar-menu-button size="SidebarMenuButtonSize.Large" popovertarget="nav-user-menu" aria-haspopup="menu">
<div
class="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted text-foreground">
<sa-icon name="user"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Amelia Hart</span>
<span class="truncate text-xs text-muted-foreground">amelia@voyager.travel</span>
</div>
<sa-icon name="chevrons-up-down" class="ml-auto"/>
</sa-sidebar-menu-button>
<sa-dropdown-menu-content class="w-56" position="PositionArea.RightSpanTop">
<sa-dropdown-menu-label class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<div
class="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted text-foreground">
<sa-icon name="user"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Amelia Hart</span>
<span class="truncate text-xs text-muted-foreground">amelia@voyager.travel</span>
</div>
</div>
</sa-dropdown-menu-label>
<sa-dropdown-menu-separator/>
<sa-dropdown-menu-group>
<sa-dropdown-menu-item>
<sa-icon name="badge-check"/>
Account
</sa-dropdown-menu-item>
<sa-dropdown-menu-item>
<sa-icon name="credit-card"/>
Billing
</sa-dropdown-menu-item>
<sa-dropdown-menu-item>
<sa-icon name="bell"/>
Notifications
</sa-dropdown-menu-item>
</sa-dropdown-menu-group>
<sa-dropdown-menu-separator/>
<sa-dropdown-menu-item variant="DropdownMenuItemVariant.Destructive">
<sa-icon name="log-out"/>
Log out
</sa-dropdown-menu-item>
</sa-dropdown-menu-content>
</sa-dropdown-menu>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-footer>
</sa-sidebar>
<sa-sidebar-inset>
<sa-app-header>
<sa-sidebar-trigger></sa-sidebar-trigger>
<sa-app-header-separator/>
<span class="text-sm font-medium">Dashboard</span>
</sa-app-header>
<div class="p-4">
<p class="text-sm text-muted-foreground">
A full-featured sidebar — header, grouped navigation with labels, an active
item, badges, a nested sub-menu, a separator, and a user footer. Toggle it
with the trigger (Ctrl/⌘ + B).
</p>
</div>
</sa-sidebar-inset>
</sa-sidebar-wrapper>Usage
Wrap the sidebar and your page content in a <sa-sidebar-wrapper>. The <sa-sidebar> holds the navigation — composed of <sa-sidebar-header>, <sa-sidebar-content> and <sa-sidebar-footer> — while <sa-sidebar-inset> holds the main page content. Navigation is built up from <sa-sidebar-group>, <sa-sidebar-menu>, <sa-sidebar-menu-item> and <sa-sidebar-menu-link>. Use <sa-sidebar-trigger> to toggle the sidebar.
<sa-sidebar-wrapper>
<sa-sidebar>
<sa-sidebar-header>
...
</sa-sidebar-header>
<sa-sidebar-content>
<sa-sidebar-group>
<sa-sidebar-group-label>Platform</sa-sidebar-group-label>
<sa-sidebar-group-content>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="...">
<sa-icon name="layout-dashboard" />
<span>Dashboard</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-group-content>
</sa-sidebar-group>
</sa-sidebar-content>
<sa-sidebar-footer>
...
</sa-sidebar-footer>
</sa-sidebar>
<sa-sidebar-inset>
<sa-sidebar-trigger />
<!-- Main page content -->
</sa-sidebar-inset>
</sa-sidebar-wrapper>Examples
Inset variant
Set variant="SidebarVariant.Inset" to render the main content as a floating, rounded card inset from the edges of the screen.
Theme
<sa-sidebar-wrapper>
<sa-sidebar variant="SidebarVariant.Inset">
<sa-sidebar-header>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<sa-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-header>
<sa-sidebar-content>
<sa-sidebar-group>
<sa-sidebar-group-label>Platform</sa-sidebar-group-label>
<sa-sidebar-group-content>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="layout-dashboard"/>
<span>Dashboard</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="ticket"/>
<span>Bookings</span>
</sa-sidebar-menu-link>
<sa-sidebar-menu-badge>12</sa-sidebar-menu-badge>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="map-pinned"/>
<span>Destinations</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="users"/>
<span>Customers</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-group-content>
</sa-sidebar-group>
</sa-sidebar-content>
<sa-sidebar-footer>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-dropdown-menu id="nav-user-menu">
<sa-sidebar-menu-button size="SidebarMenuButtonSize.Large" popovertarget="nav-user-menu" aria-haspopup="menu">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted text-foreground">
<sa-icon name="user"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Amelia Hart</span>
<span class="truncate text-xs text-muted-foreground">amelia@voyager.travel</span>
</div>
<sa-icon name="chevrons-up-down" class="ml-auto"/>
</sa-sidebar-menu-button>
<sa-dropdown-menu-content class="w-56" position="PositionArea.RightSpanTop">
<sa-dropdown-menu-label class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted text-foreground">
<sa-icon name="user"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Amelia Hart</span>
<span class="truncate text-xs text-muted-foreground">amelia@voyager.travel</span>
</div>
</div>
</sa-dropdown-menu-label>
<sa-dropdown-menu-separator/>
<sa-dropdown-menu-group>
<sa-dropdown-menu-item>
<sa-icon name="badge-check"/>
Account
</sa-dropdown-menu-item>
<sa-dropdown-menu-item>
<sa-icon name="credit-card"/>
Billing
</sa-dropdown-menu-item>
<sa-dropdown-menu-item>
<sa-icon name="bell"/>
Notifications
</sa-dropdown-menu-item>
</sa-dropdown-menu-group>
<sa-dropdown-menu-separator/>
<sa-dropdown-menu-item variant="DropdownMenuItemVariant.Destructive">
<sa-icon name="log-out"/>
Log out
</sa-dropdown-menu-item>
</sa-dropdown-menu-content>
</sa-dropdown-menu>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-footer>
</sa-sidebar>
<sa-sidebar-inset>
<sa-app-header>
<sa-sidebar-trigger></sa-sidebar-trigger>
<sa-app-header-separator/>
<span class="text-sm font-medium">Dashboard</span>
</sa-app-header>
<div class="p-4">
<p class="text-sm text-muted-foreground">
The <code class="font-mono">inset</code> variant renders the main content as a
rounded, floating card with the sidebar tucked alongside it.
</p>
</div>
</sa-sidebar-inset>
</sa-sidebar-wrapper>Floating variant
Set variant="SidebarVariant.Floating" to detach the sidebar from the edge of the screen and render it as a floating panel.
Theme
<sa-sidebar-wrapper>
<sa-sidebar variant="SidebarVariant.Floating">
<sa-sidebar-header>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<sa-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-header>
<sa-sidebar-content>
<sa-sidebar-group>
<sa-sidebar-group-label>Platform</sa-sidebar-group-label>
<sa-sidebar-group-content>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="layout-dashboard"/>
<span>Dashboard</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="ticket"/>
<span>Bookings</span>
</sa-sidebar-menu-link>
<sa-sidebar-menu-badge>12</sa-sidebar-menu-badge>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="map-pinned"/>
<span>Destinations</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="users"/>
<span>Customers</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-group-content>
</sa-sidebar-group>
</sa-sidebar-content>
<sa-sidebar-footer>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-dropdown-menu id="nav-user-menu">
<sa-sidebar-menu-button size="SidebarMenuButtonSize.Large" popovertarget="nav-user-menu" aria-haspopup="menu">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted text-foreground">
<sa-icon name="user"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Amelia Hart</span>
<span class="truncate text-xs text-muted-foreground">amelia@voyager.travel</span>
</div>
<sa-icon name="chevrons-up-down" class="ml-auto"/>
</sa-sidebar-menu-button>
<sa-dropdown-menu-content class="w-56" position="PositionArea.RightSpanTop">
<sa-dropdown-menu-label class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted text-foreground">
<sa-icon name="user"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Amelia Hart</span>
<span class="truncate text-xs text-muted-foreground">amelia@voyager.travel</span>
</div>
</div>
</sa-dropdown-menu-label>
<sa-dropdown-menu-separator/>
<sa-dropdown-menu-group>
<sa-dropdown-menu-item>
<sa-icon name="badge-check"/>
Account
</sa-dropdown-menu-item>
<sa-dropdown-menu-item>
<sa-icon name="credit-card"/>
Billing
</sa-dropdown-menu-item>
<sa-dropdown-menu-item>
<sa-icon name="bell"/>
Notifications
</sa-dropdown-menu-item>
</sa-dropdown-menu-group>
<sa-dropdown-menu-separator/>
<sa-dropdown-menu-item variant="DropdownMenuItemVariant.Destructive">
<sa-icon name="log-out"/>
Log out
</sa-dropdown-menu-item>
</sa-dropdown-menu-content>
</sa-dropdown-menu>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-footer>
</sa-sidebar>
<sa-sidebar-inset>
<sa-app-header>
<sa-sidebar-trigger></sa-sidebar-trigger>
<sa-app-header-separator/>
<span class="text-sm font-medium">Dashboard</span>
</sa-app-header>
<div class="p-4">
<p class="text-sm text-muted-foreground">
The <code class="font-mono">floating</code> variant detaches the sidebar into a
rounded panel with its own border and shadow.
</p>
</div>
</sa-sidebar-inset>
</sa-sidebar-wrapper>Alternate trigger icon
Provide child content to <sa-sidebar-trigger> to override the default icon. Use the in-aria-expanded and not-in-aria-expanded variants to swap the icon based on whether the sidebar is open or closed.
Theme
<sa-sidebar-wrapper>
<sa-sidebar>
<sa-sidebar-header>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<sa-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-header>
<sa-sidebar-content>
<sa-sidebar-group>
<sa-sidebar-group-content>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="layout-dashboard"/>
<span>Dashboard</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="ticket"/>
<span>Bookings</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="map-pinned"/>
<span>Destinations</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-group-content>
</sa-sidebar-group>
</sa-sidebar-content>
</sa-sidebar>
<sa-sidebar-inset>
<sa-app-header>
@* The trigger renders a <button> carrying aria-expanded. Supplying our own
child content overrides the default panel-left icon. *@
<sa-sidebar-trigger>
<sa-icon name="panel-left-close" class="not-in-aria-expanded:hidden"/>
<sa-icon name="panel-left-open" class="in-aria-expanded:hidden"/>
</sa-sidebar-trigger>
<span class="text-sm text-muted-foreground">The trigger icon swaps with the sidebar state</span>
</sa-app-header>
<div class="p-4">
<p class="text-sm text-muted-foreground">
Toggle the sidebar and watch the trigger icon change between
<code class="font-mono">panel-left-close</code> and
<code class="font-mono">panel-left-open</code>.
</p>
</div>
</sa-sidebar-inset>
</sa-sidebar-wrapper>Right side
Set side="SidebarSide.Right" to anchor the sidebar to the right edge of the screen.
Theme
<sa-sidebar-wrapper>
<sa-sidebar side="SidebarSide.Right">
<sa-sidebar-header>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<sa-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-header>
<sa-sidebar-content>
<sa-sidebar-group>
<sa-sidebar-group-label>Platform</sa-sidebar-group-label>
<sa-sidebar-group-content>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="layout-dashboard"/>
<span>Dashboard</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="ticket"/>
<span>Bookings</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="map-pinned"/>
<span>Destinations</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="users"/>
<span>Customers</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-group-content>
</sa-sidebar-group>
</sa-sidebar-content>
</sa-sidebar>
<sa-sidebar-inset>
<sa-app-header>
<span class="text-sm font-medium">Dashboard</span>
<sa-app-header-actions>
<sa-sidebar-trigger></sa-sidebar-trigger>
</sa-app-header-actions>
</sa-app-header>
<div class="p-4">
<p class="text-sm text-muted-foreground">
This sidebar is anchored to the right with <code class="font-mono">side="SidebarSide.Right"</code>,
so the trigger sits at the end of the header.
</p>
</div>
</sa-sidebar-inset>
</sa-sidebar-wrapper>Collapsible to icons
Set collapsible="SidebarCollapsible.Icon" to collapse the sidebar down to icons only, instead of hiding it entirely.
Theme
<sa-sidebar-wrapper>
<sa-sidebar collapsible="SidebarCollapsible.Icon">
<sa-sidebar-header>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<sa-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-header>
<sa-sidebar-content>
<sa-sidebar-group>
<sa-sidebar-group-label>Platform</sa-sidebar-group-label>
<sa-sidebar-group-content>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="layout-dashboard"/>
<span>Dashboard</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="ticket"/>
<span>Bookings</span>
</sa-sidebar-menu-link>
<sa-sidebar-menu-badge>12</sa-sidebar-menu-badge>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="map-pinned"/>
<span>Destinations</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="plane-takeoff"/>
<span>Flights</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="hotel"/>
<span>Hotels</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="settings"/>
<span>Settings</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-group-content>
</sa-sidebar-group>
</sa-sidebar-content>
</sa-sidebar>
<sa-sidebar-inset>
<sa-app-header>
<sa-sidebar-trigger></sa-sidebar-trigger>
<span class="text-sm text-muted-foreground">Toggle to collapse the sidebar to icons</span>
</sa-app-header>
<div class="p-4">
<p class="text-sm text-muted-foreground">
With <code class="font-mono">collapsible="SidebarCollapsible.Icon"</code> the sidebar
shrinks to a narrow rail of icons instead of sliding off-canvas.
</p>
</div>
</sa-sidebar-inset>
</sa-sidebar-wrapper>Collapsible groups
Wrap a <sa-sidebar-group> in a <sa-collapsible> to let an entire section of the sidebar collapse and expand together.
Theme
<sa-sidebar-wrapper>
<sa-sidebar>
<sa-sidebar-header>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<sa-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-header>
<sa-sidebar-content>
<sa-sidebar-group>
<button type="button" command="--toggle" commandfor="group-platform" class="block w-full">
<sa-sidebar-group-label class="cursor-pointer hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<span>Platform</span>
<sa-icon name="chevron-right" class="ml-auto in-aria-expanded:hidden"/>
<sa-icon name="chevron-down" class="ml-auto not-in-aria-expanded:hidden"/>
</sa-sidebar-group-label>
</button>
<sa-collapsible id="group-platform" class="block">
<sa-sidebar-group-content>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="layout-dashboard"/>
<span>Dashboard</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="ticket"/>
<span>Bookings</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="map-pinned"/>
<span>Destinations</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="users"/>
<span>Customers</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-group-content>
</sa-collapsible>
</sa-sidebar-group>
<sa-sidebar-group>
<button type="button" command="--toggle" commandfor="group-resources" class="block w-full">
<sa-sidebar-group-label class="cursor-pointer hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<span>Resources</span>
<sa-icon name="chevron-right" class="ml-auto in-aria-expanded:hidden"/>
<sa-icon name="chevron-down" class="ml-auto not-in-aria-expanded:hidden"/>
</sa-sidebar-group-label>
</button>
<sa-collapsible id="group-resources" hidden="" class="block">
<sa-sidebar-group-content>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="book-open"/>
<span>Documentation</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="life-buoy"/>
<span>Support</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="sparkles"/>
<span>Changelog</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-group-content>
</sa-collapsible>
</sa-sidebar-group>
</sa-sidebar-content>
<sa-sidebar-footer>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-dropdown-menu id="nav-user-menu">
<sa-sidebar-menu-button size="SidebarMenuButtonSize.Large" popovertarget="nav-user-menu" aria-haspopup="menu">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted text-foreground">
<sa-icon name="user"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Amelia Hart</span>
<span class="truncate text-xs text-muted-foreground">amelia@@voyager.travel</span>
</div>
<sa-icon name="chevrons-up-down" class="ml-auto"/>
</sa-sidebar-menu-button>
<sa-dropdown-menu-content class="w-56" position="PositionArea.RightSpanTop">
<sa-dropdown-menu-label class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted text-foreground">
<sa-icon name="user"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Amelia Hart</span>
<span class="truncate text-xs text-muted-foreground">amelia@@voyager.travel</span>
</div>
</div>
</sa-dropdown-menu-label>
<sa-dropdown-menu-separator/>
<sa-dropdown-menu-group>
<sa-dropdown-menu-item>
<sa-icon name="badge-check"/>
Account
</sa-dropdown-menu-item>
<sa-dropdown-menu-item>
<sa-icon name="credit-card"/>
Billing
</sa-dropdown-menu-item>
<sa-dropdown-menu-item>
<sa-icon name="bell"/>
Notifications
</sa-dropdown-menu-item>
</sa-dropdown-menu-group>
<sa-dropdown-menu-separator/>
<sa-dropdown-menu-item variant="DropdownMenuItemVariant.Destructive">
<sa-icon name="log-out"/>
Log out
</sa-dropdown-menu-item>
</sa-dropdown-menu-content>
</sa-dropdown-menu>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-footer>
</sa-sidebar>
<sa-sidebar-inset>
<sa-app-header>
<sa-sidebar-trigger></sa-sidebar-trigger>
<sa-app-header-separator/>
<span class="text-sm font-medium">Dashboard</span>
</sa-app-header>
<div class="p-4">
<p class="text-sm text-muted-foreground">
Whole sidebar groups collapse here. Each <code class="font-mono">sa-sidebar-group-label</code>
is wrapped in a <code class="font-mono"><button></code> that toggles a
<code class="font-mono">sa-collapsible</code> around the group's
<code class="font-mono">sa-sidebar-group-content</code> via the Invoker Commands API.
<strong>Platform</strong> starts open and <strong>Resources</strong> starts collapsed;
the chevron flips with the group's <code class="font-mono">aria-expanded</code> state.
</p>
</div>
</sa-sidebar-inset>
</sa-sidebar-wrapper>Collapsible items
Use <sa-sidebar-menu-button> together with <sa-collapsible> to create a menu item that expands to reveal nested sub-items.
Theme
<sa-sidebar-wrapper>
<sa-sidebar>
<sa-sidebar-header>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<sa-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-header>
<sa-sidebar-content>
<sa-sidebar-group>
<sa-sidebar-group-label>Platform</sa-sidebar-group-label>
<sa-sidebar-group-content>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="layout-dashboard"/>
<span>Dashboard</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-button command="--toggle" commandfor="nav-bookings">
<sa-icon name="ticket"/>
<span>Bookings</span>
<sa-icon name="chevron-right" class="ml-auto in-aria-expanded:hidden"/>
<sa-icon name="chevron-down" class="ml-auto not-in-aria-expanded:hidden"/>
</sa-sidebar-menu-button>
<sa-collapsible id="nav-bookings" class="block">
<sa-sidebar-menu-sub>
<sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-link href="#"><span>Upcoming</span></sa-sidebar-menu-sub-link>
</sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-link href="#"><span>Past</span></sa-sidebar-menu-sub-link>
</sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-link href="#"><span>Cancelled</span></sa-sidebar-menu-sub-link>
</sa-sidebar-menu-sub-item>
</sa-sidebar-menu-sub>
</sa-collapsible>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-button command="--toggle" commandfor="nav-destinations">
<sa-icon name="map-pinned"/>
<span>Destinations</span>
<sa-icon name="chevron-right" class="ml-auto in-aria-expanded:hidden"/>
<sa-icon name="chevron-down" class="ml-auto not-in-aria-expanded:hidden"/>
</sa-sidebar-menu-button>
<sa-collapsible id="nav-destinations" hidden="" class="block">
<sa-sidebar-menu-sub>
<sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-button command="--toggle" commandfor="nav-europe">
<span>Europe</span>
<sa-icon name="chevron-right" class="ml-auto in-aria-expanded:hidden"/>
<sa-icon name="chevron-down" class="ml-auto not-in-aria-expanded:hidden"/>
</sa-sidebar-menu-sub-button>
<sa-collapsible id="nav-europe" hidden="" class="block">
<sa-sidebar-menu-sub>
<sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-link href="#"><span>France</span></sa-sidebar-menu-sub-link>
</sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-link href="#"><span>Italy</span></sa-sidebar-menu-sub-link>
</sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-link href="#"><span>Spain</span></sa-sidebar-menu-sub-link>
</sa-sidebar-menu-sub-item>
</sa-sidebar-menu-sub>
</sa-collapsible>
</sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-link href="#"><span>Asia Pacific</span></sa-sidebar-menu-sub-link>
</sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-link href="#"><span>The Americas</span></sa-sidebar-menu-sub-link>
</sa-sidebar-menu-sub-item>
</sa-sidebar-menu-sub>
</sa-collapsible>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-group-content>
</sa-sidebar-group>
<sa-sidebar-group>
<sa-sidebar-group-label>Operations</sa-sidebar-group-label>
<sa-sidebar-group-content>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-button command="--toggle" commandfor="nav-logistics">
<sa-icon name="route"/>
<span>Logistics</span>
<sa-icon name="chevron-right" class="ml-auto in-aria-expanded:hidden"/>
<sa-icon name="chevron-down" class="ml-auto not-in-aria-expanded:hidden"/>
</sa-sidebar-menu-button>
<sa-collapsible id="nav-logistics" hidden="" class="block">
<sa-sidebar-menu-sub>
<sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-link href="#"><span>Flights</span></sa-sidebar-menu-sub-link>
</sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-link href="#"><span>Hotels</span></sa-sidebar-menu-sub-link>
</sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-item>
<sa-sidebar-menu-sub-link href="#"><span>Itineraries</span></sa-sidebar-menu-sub-link>
</sa-sidebar-menu-sub-item>
</sa-sidebar-menu-sub>
</sa-collapsible>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-group-content>
</sa-sidebar-group>
</sa-sidebar-content>
<sa-sidebar-footer>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-dropdown-menu id="nav-user-menu">
<sa-sidebar-menu-button size="SidebarMenuButtonSize.Large" popovertarget="nav-user-menu" aria-haspopup="menu">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted text-foreground">
<sa-icon name="user"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Amelia Hart</span>
<span class="truncate text-xs text-muted-foreground">amelia@@voyager.travel</span>
</div>
<sa-icon name="chevrons-up-down" class="ml-auto"/>
</sa-sidebar-menu-button>
<sa-dropdown-menu-content class="w-56" position="PositionArea.RightSpanTop">
<sa-dropdown-menu-label class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted text-foreground">
<sa-icon name="user"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Amelia Hart</span>
<span class="truncate text-xs text-muted-foreground">amelia@@voyager.travel</span>
</div>
</div>
</sa-dropdown-menu-label>
<sa-dropdown-menu-separator/>
<sa-dropdown-menu-group>
<sa-dropdown-menu-item>
<sa-icon name="badge-check"/>
Account
</sa-dropdown-menu-item>
<sa-dropdown-menu-item>
<sa-icon name="credit-card"/>
Billing
</sa-dropdown-menu-item>
<sa-dropdown-menu-item>
<sa-icon name="bell"/>
Notifications
</sa-dropdown-menu-item>
</sa-dropdown-menu-group>
<sa-dropdown-menu-separator/>
<sa-dropdown-menu-item variant="DropdownMenuItemVariant.Destructive">
<sa-icon name="log-out"/>
Log out
</sa-dropdown-menu-item>
</sa-dropdown-menu-content>
</sa-dropdown-menu>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-footer>
</sa-sidebar>
<sa-sidebar-inset>
<sa-app-header>
<sa-sidebar-trigger></sa-sidebar-trigger>
<sa-app-header-separator/>
<span class="text-sm font-medium">Dashboard</span>
</sa-app-header>
<div class="p-4">
<p class="text-sm text-muted-foreground">
The <strong>Bookings</strong>, <strong>Destinations</strong> and
<strong>Logistics</strong> menu items are collapsible items built with
<code class="font-mono">sa-sidebar-menu-button</code>, and
<strong>Destinations → Europe</strong> nests a second level with
<code class="font-mono">sa-sidebar-menu-sub-button</code>. Each button toggles a
<code class="font-mono">sa-collapsible</code> via the Invoker Commands API; the
chevron flips with the button's <code class="font-mono">aria-expanded</code> state.
</p>
</div>
</sa-sidebar-inset>
</sa-sidebar-wrapper>Sidebar in a dialog
Set collapsible="SidebarCollapsible.None" to render a sidebar inside a <sa-dialog>, for example as part of a settings screen.
Theme
<div class="flex justify-center">
<sa-button variant="ButtonVariant.Outline" commandfor="dialog-settings" command="show-modal">
Open settings
</sa-button>
</div>
@* A native <dialog> defaults to fit-content width, and sa-dialog's default classes
cap it at `sm:max-w-sm`. So give it an explicit responsive width (760px, shrinking on
narrow viewports) and clear that cap with `sm:max-w-none`. *@
<sa-dialog id="dialog-settings" class="w-[min(760px,100vw_-_2rem)] overflow-hidden p-0 sm:max-w-none">
<sa-dialog-title class="sr-only">Settings</sa-dialog-title>
<sa-dialog-description class="sr-only">Customize your settings here.</sa-dialog-description>
<sa-sidebar-wrapper class="min-h-0 items-start">
@* `collapsible="None"` renders a static, in-flow sidebar (no toggle, no
off-canvas drawer) — the variant suited to embedding. *@
<sa-sidebar collapsible="SidebarCollapsible.None" class="flex h-[480px] w-48">
<sa-sidebar-content>
<sa-sidebar-group>
<sa-sidebar-group-content>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="bell"/>
<span>Notifications</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="navigation"/>
<span>Navigation</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="paintbrush"/>
<span>Appearance</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
@* Manually marked active for the demo. *@
<sa-sidebar-menu-link href="#" data-active>
<sa-icon name="message-circle"/>
<span>Messages & media</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="globe"/>
<span>Language & region</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="accessibility"/>
<span>Accessibility</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-group-content>
</sa-sidebar-group>
</sa-sidebar-content>
</sa-sidebar>
<main class="flex h-[480px] flex-1 flex-col overflow-hidden">
<sa-app-header class="h-16">
<span class="text-base font-medium">Messages & media</span>
</sa-app-header>
<div class="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
<p class="text-sm text-muted-foreground">
A static <code class="font-mono">collapsible="None"</code> sidebar lives inside the
dialog. The list below scrolls independently of the sidebar.
</p>
<div class="aspect-video max-w-3xl rounded-lg bg-muted"></div>
<div class="aspect-video max-w-3xl rounded-lg bg-muted"></div>
<div class="aspect-video max-w-3xl rounded-lg bg-muted"></div>
<div class="aspect-video max-w-3xl rounded-lg bg-muted"></div>
</div>
</main>
</sa-sidebar-wrapper>
</sa-dialog>Accessibility
<sa-sidebar-trigger> renders a button labelled "Toggle Sidebar" whose aria-expanded state is kept in sync with the sidebar, and the mobile backdrop is a button labelled "Close sidebar". <sa-sidebar-inset> renders the page content in a <main> element.
The active menu link is only marked visually. Add aria-current="page" to the link for the current page so assistive technology announces it as well, and give a menu an aria-label when the page has more than one navigation region.
API Reference
<sa-sidebar-wrapper>
Renders a <sel-sidebar> web component that wraps the sidebar and page content and owns the open/collapsed state. Nested <sa-sidebar-trigger> elements toggle it through the Invoker Commands API. It honours a user-supplied id and generates one otherwise.
<sa-sidebar>
Renders the sidebar panel itself as a <div> (including the mobile drawer and its backdrop).
Prop
Type
<sa-sidebar-trigger>
Renders a <button> that toggles the sidebar via the Invoker Commands API (command="--toggle-sidebar" targeting the wrapper). It shows a default panel icon unless you supply child content.
<sa-sidebar-header>
Renders a <div> for content pinned to the top of the sidebar.
<sa-sidebar-content>
Renders a <div> holding the scrollable body of the sidebar.
<sa-sidebar-footer>
Renders a <div> for content pinned to the bottom of the sidebar.
<sa-sidebar-inset>
Renders a <main> element holding the page content next to the sidebar.
<sa-sidebar-separator>
Renders a horizontal <div role="separator"> inside the sidebar.
<sa-sidebar-group>
Renders a <div> for a section of the sidebar.
<sa-sidebar-group-label>
Renders a <div> heading for a group.
<sa-sidebar-group-content>
Renders a <div> holding a group's content.
<sa-sidebar-menu>
Renders a <ul> containing menu items.
<sa-sidebar-menu-item>
Renders an <li> for a single menu entry.
<sa-sidebar-menu-button>
Renders a <button> styled as a menu entry — typically paired with <sa-collapsible> for expandable items.
Prop
Type
<sa-sidebar-menu-link>
Renders an <a> element styled as a menu entry. It is marked active automatically when its routing attributes match the current route.
Prop
Type
Routing attributes
The menu link also accepts the same routing attributes as the ASP.NET Core Anchor Tag Helper for generating the href. Supply either an href or these attributes — not both.
Prop
Type
<sa-sidebar-menu-badge>
Renders a <div> badge (such as a count) alongside a menu entry.
<sa-sidebar-menu-sub>
Renders a <ul> containing nested sub-items.
<sa-sidebar-menu-sub-item>
Renders an <li> for a single sub-entry.
<sa-sidebar-menu-sub-button>
Renders a <button> styled as a sub-entry.
Prop
Type
<sa-sidebar-menu-sub-link>
Renders an <a> element styled as a sub-entry, marked active automatically when its route matches. It accepts the same routing attributes as <sa-sidebar-menu-link> above.
Prop
Type