Sidebar
Collapsible side navigation, typically used as the primary navigation of SaaS applications.
'use client'
import { Badge, Spacer } from '@chakra-ui/react'
import { SaasUIIcon } from '@saas-ui/assets'
import { IconButton } from '#components/ui/icon-button'
import { Menu } from '#components/ui/menu'
import { Persona } from '#components/ui/persona'
import { Sidebar } from '#components/ui/sidebar'
import {
LuFolder,
LuHouse,
LuInbox,
LuSettings,
LuUsers,
} from 'react-icons/lu'
export const SidebarBasic = () => {
return (
<Sidebar.Provider>
<Sidebar.Root width="240px" minHeight="480px">
<Sidebar.Header ps="4">
<SaasUIIcon width="24px" color="fg" />
<Spacer />
<Menu.Root>
<Menu.Trigger asChild>
<IconButton variant="ghost" size="sm" aria-label="User menu">
<Persona.Root presence="online">
<Persona.Avatar size="xs" src="/img/avatars/1.png" />
</Persona.Root>
</IconButton>
</Menu.Trigger>
<Menu.Content>
<Menu.Item value="signout">Sign out</Menu.Item>
</Menu.Content>
</Menu.Root>
</Sidebar.Header>
<Sidebar.Body>
<Sidebar.Group>
<Sidebar.GroupContent>
<Sidebar.NavItem>
<Sidebar.NavButton active>
<LuHouse /> Dashboard
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuInbox /> Inbox
<Spacer />
<Badge variant="subtle">12</Badge>
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuUsers /> Contacts
</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Sidebar.Group>
<Sidebar.Group>
<Sidebar.GroupHeader>
<Sidebar.GroupTitle>Projects</Sidebar.GroupTitle>
</Sidebar.GroupHeader>
<Sidebar.GroupContent>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuFolder /> Website redesign
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuFolder /> Mobile app
</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Sidebar.Group>
<Spacer />
<Sidebar.Group>
<Sidebar.GroupContent>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuSettings /> Settings
</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Sidebar.Group>
</Sidebar.Body>
</Sidebar.Root>
</Sidebar.Provider>
)
}
Anatomy
import { Sidebar } from '@/components/ui/sidebar'<Sidebar.Provider>
<Sidebar.FlyoutTrigger />
<Sidebar.Root>
<Sidebar.Header></Sidebar.Header>
<Sidebar.Body>
<Sidebar.Group>
<Sidebar.GroupHeader>
<Sidebar.GroupTitle>Navigation</Sidebar.GroupTitle>
</Sidebar.GroupHeader>
<Sidebar.GroupContent>
<Sidebar.NavItem>
<Sidebar.NavButton>Home</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Sidebar.Group>
</Sidebar.Body>
<Sidebar.Footer></Sidebar.Footer>
</Sidebar.Root>
<Sidebar.Backdrop />
</Sidebar.Provider>Usage
App shell
Combine the sidebar with the AppShell component to create a typical
application layout. The sidebar collapses automatically on mobile and renders
a backdrop overlay.
Contacts
Your application content
'use client'
import { Spacer } from '@chakra-ui/react'
import { SaasUILogo } from '@saas-ui/assets'
import { AppShell } from '#components/ui/app-shell'
import { IconButton } from '#components/ui/icon-button'
import { Menu } from '#components/ui/menu'
import { Page } from '#components/ui/page'
import { Persona } from '#components/ui/persona'
import { Sidebar } from '#components/ui/sidebar'
import { FiHome, FiUsers } from 'react-icons/fi'
export const AppShellSidebar = () => {
return (
<Sidebar.Provider>
<AppShell
height="400px"
sidebar={
<Sidebar.Root width="240px">
<Sidebar.Header ps="4">
<SaasUILogo width="80px" />
<Spacer />
<Menu.Root>
<Menu.Trigger asChild>
<IconButton variant="ghost" size="sm" aria-label="User menu">
<Persona.Root presence="online">
<Persona.Avatar size="xs" src="/showcase-avatar.jpg" />
</Persona.Root>
</IconButton>
</Menu.Trigger>
<Menu.Content>
<Menu.Item value="signout">Sign out</Menu.Item>
</Menu.Content>
</Menu.Root>
</Sidebar.Header>
<Sidebar.Body>
<Sidebar.Group>
<Sidebar.GroupContent>
<Sidebar.NavItem>
<Sidebar.NavButton>
<FiHome /> Home
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton active>
<FiUsers /> Contacts
</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Sidebar.Group>
</Sidebar.Body>
</Sidebar.Root>
}
>
<Page.Root>
<Page.Header title="Contacts" />
<Page.Body textStyle="sm">Your application content</Page.Body>
</Page.Root>
</AppShell>
</Sidebar.Provider>
)
}
Inset variant
Set variant="inset" on Sidebar.Provider and wrap your main content in
Sidebar.Inset to render it as a raised panel on top of the sidebar
background.
'use client'
import { AppShell } from '#components/ui/app-shell'
import { Page } from '#components/ui/page'
import { Sidebar } from '#components/ui/sidebar'
import { LuChartPie, LuHouse, LuInbox } from 'react-icons/lu'
export const SidebarInset = () => {
return (
<Sidebar.Provider variant="inset">
<AppShell
height="400px"
overflow="hidden"
bg="sidebar.bg"
sidebar={
<Sidebar.Root>
<Sidebar.Body>
<Sidebar.Group>
<Sidebar.GroupContent>
<Sidebar.NavItem>
<Sidebar.NavButton active>
<LuHouse /> Dashboard
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuInbox /> Inbox
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuChartPie /> Reports
</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Sidebar.Group>
</Sidebar.Body>
</Sidebar.Root>
}
>
<Sidebar.Inset>
<Page.Root>
<Page.Header title="Dashboard" />
<Page.Body textStyle="sm">
The content area is rendered as an inset panel.
</Page.Body>
</Page.Root>
</Sidebar.Inset>
</AppShell>
</Sidebar.Provider>
)
}
Grouped navigation
Use Sidebar.Group with a GroupTitle to organize navigation into sections,
for example workspace navigation and settings. Combine Spacer and Badge
to show counts next to an item.
'use client'
import { Badge, Spacer } from '@chakra-ui/react'
import { Sidebar } from '#components/ui/sidebar'
import {
LuChartPie,
LuCreditCard,
LuHouse,
LuInbox,
LuPlug,
LuUsers,
} from 'react-icons/lu'
export const SidebarGrouped = () => {
return (
<Sidebar.Provider>
<Sidebar.Root width="240px" minHeight="400px">
<Sidebar.Body>
<Sidebar.Group>
<Sidebar.GroupHeader>
<Sidebar.GroupTitle>Workspace</Sidebar.GroupTitle>
</Sidebar.GroupHeader>
<Sidebar.GroupContent>
<Sidebar.NavItem>
<Sidebar.NavButton active>
<LuHouse /> Dashboard
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuInbox /> Inbox
<Spacer />
<Badge variant="subtle">12</Badge>
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuChartPie /> Reports
</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Sidebar.Group>
<Sidebar.Group>
<Sidebar.GroupHeader>
<Sidebar.GroupTitle>Settings</Sidebar.GroupTitle>
</Sidebar.GroupHeader>
<Sidebar.GroupContent>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuUsers /> Members
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuCreditCard /> Billing
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuPlug /> Integrations
</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Sidebar.Group>
</Sidebar.Body>
</Sidebar.Root>
</Sidebar.Provider>
)
}
Collapsible groups
Wrap a group with the Collapsible component to let users collapse sections
they use less often. Use Sidebar.GroupEndElement for contextual actions like
creating a new project, shown on hover.
'use client'
import { Collapsible, Icon } from '@chakra-ui/react'
import { IconButton } from '#components/ui/icon-button'
import { Sidebar } from '#components/ui/sidebar'
import {
LuChevronRight,
LuFolder,
LuHouse,
LuInbox,
LuPlus,
} from 'react-icons/lu'
export const SidebarCollapsibleGroup = () => {
return (
<Sidebar.Provider>
<Sidebar.Root width="240px" minHeight="400px">
<Sidebar.Body>
<Sidebar.Group>
<Sidebar.GroupContent>
<Sidebar.NavItem>
<Sidebar.NavButton active>
<LuHouse /> Dashboard
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuInbox /> Inbox
</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Sidebar.Group>
<Collapsible.Root asChild defaultOpen>
<Sidebar.Group>
<Sidebar.GroupHeader>
<Collapsible.Trigger asChild>
<Sidebar.GroupTitle>
Projects
<Icon
ms="1"
transition="transform"
_groupOpen={{ transform: 'rotate(90deg)' }}
>
<LuChevronRight />
</Icon>
</Sidebar.GroupTitle>
</Collapsible.Trigger>
<Sidebar.GroupEndElement>
<IconButton
variant="ghost"
aria-label="Create project"
size="xs"
opacity="0"
_groupHover={{ opacity: 0.6, _hover: { opacity: 1 } }}
>
<LuPlus />
</IconButton>
</Sidebar.GroupEndElement>
</Sidebar.GroupHeader>
<Collapsible.Content>
<Sidebar.GroupContent>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuFolder /> Website redesign
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuFolder /> Mobile app
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuFolder /> Q3 marketing
</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Collapsible.Content>
</Sidebar.Group>
</Collapsible.Root>
</Sidebar.Body>
</Sidebar.Root>
</Sidebar.Provider>
)
}
Nested navigation
Nav items can be nested one level deep, for example to show pages inside a
project. Wrap the parent NavItem with Collapsible and indent the nested
GroupContent.
'use client'
import { Collapsible, Icon, Spacer } from '@chakra-ui/react'
import { Sidebar } from '#components/ui/sidebar'
import { LuChevronRight, LuFolder, LuHouse, LuSettings } from 'react-icons/lu'
export const SidebarNested = () => {
return (
<Sidebar.Provider>
<Sidebar.Root width="240px" minHeight="400px">
<Sidebar.Body>
<Sidebar.Group>
<Sidebar.GroupContent>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuHouse /> Dashboard
</Sidebar.NavButton>
</Sidebar.NavItem>
<Collapsible.Root defaultOpen>
<Sidebar.NavItem>
<Collapsible.Trigger asChild>
<Sidebar.NavButton>
<LuFolder /> Projects
<Spacer />
<Icon
transition="transform"
_open={{ transform: 'rotate(90deg)' }}
>
<LuChevronRight />
</Icon>
</Sidebar.NavButton>
</Collapsible.Trigger>
</Sidebar.NavItem>
<Collapsible.Content>
<Sidebar.GroupContent
ms="3.5"
ps="2.5"
borderStartWidth="1px"
>
<Sidebar.NavItem>
<Sidebar.NavButton active>
Website redesign
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>Mobile app</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>Q3 marketing</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Collapsible.Content>
</Collapsible.Root>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuSettings /> Settings
</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Sidebar.Group>
</Sidebar.Body>
</Sidebar.Root>
</Sidebar.Provider>
)
}
Hover actions
Use Sidebar.NavButtonEndElement to add secondary actions to a nav item,
like removing an item from favourites. Reveal them on hover with the
_parentHover condition to keep the sidebar clean.
'use client'
import { Spacer, Text } from '@chakra-ui/react'
import { IconButton } from '#components/ui/icon-button'
import { Sidebar } from '#components/ui/sidebar'
import { LuHouse, LuInbox, LuX } from 'react-icons/lu'
const favourites = [
{ emoji: '🚀', label: 'Product launch' },
{ emoji: '🎨', label: 'Design system' },
{ emoji: '📈', label: 'Growth experiments' },
]
export const SidebarHoverActions = () => {
return (
<Sidebar.Provider>
<Sidebar.Root width="240px" minHeight="400px">
<Sidebar.Body>
<Sidebar.Group>
<Sidebar.GroupContent>
<Sidebar.NavItem>
<Sidebar.NavButton active>
<LuHouse /> Dashboard
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuInbox /> Inbox
</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Sidebar.Group>
<Sidebar.Group>
<Sidebar.GroupHeader>
<Sidebar.GroupTitle>Favourites</Sidebar.GroupTitle>
</Sidebar.GroupHeader>
<Sidebar.GroupContent>
{favourites.map((item) => (
<Sidebar.NavItem key={item.label}>
<Sidebar.NavButton>
<Text>{item.emoji}</Text>
{item.label}
<Spacer />
<Sidebar.NavButtonEndElement
opacity="0"
_parentHover={{ opacity: 0.6, _hover: { opacity: 1 } }}
>
<IconButton
variant="ghost"
aria-label="Remove from favourites"
size="xs"
>
<LuX />
</IconButton>
</Sidebar.NavButtonEndElement>
</Sidebar.NavButton>
</Sidebar.NavItem>
))}
</Sidebar.GroupContent>
</Sidebar.Group>
</Sidebar.Body>
</Sidebar.Root>
</Sidebar.Provider>
)
}
User menu
Use Sidebar.Footer for content that sticks to the bottom of the sidebar,
like an account menu with profile and sign out actions.
Renata Alink
hello@saas-ui.dev
'use client'
import { Box, Spacer } from '@chakra-ui/react'
import { SaasUILogo } from '@saas-ui/assets'
import { Menu } from '#components/ui/menu'
import { Persona } from '#components/ui/persona'
import { Sidebar } from '#components/ui/sidebar'
import { LuChevronsUpDown, LuHouse, LuInbox, LuUsers } from 'react-icons/lu'
export const SidebarUserMenu = () => {
return (
<Sidebar.Provider>
<Sidebar.Root width="240px" minHeight="400px">
<Sidebar.Header ps="4">
<SaasUILogo width="80px" />
</Sidebar.Header>
<Sidebar.Body>
<Sidebar.Group>
<Sidebar.GroupContent>
<Sidebar.NavItem>
<Sidebar.NavButton active>
<LuHouse /> Dashboard
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuInbox /> Inbox
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuUsers /> Contacts
</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Sidebar.Group>
</Sidebar.Body>
<Sidebar.Footer>
<Sidebar.Group>
<Sidebar.GroupContent>
<Sidebar.NavItem size="lg">
<Menu.Root positioning={{ placement: 'top-start' }}>
<Menu.Trigger asChild>
<Sidebar.NavButton>
<Persona.Root presence="online">
<Persona.Avatar size="xs" src="/showcase-avatar.jpg" />
</Persona.Root>
<Box flex="1" textAlign="start">
Renata Alink
<Box textStyle="xs" color="fg.muted">
hello@saas-ui.dev
</Box>
</Box>
<Spacer />
<LuChevronsUpDown />
</Sidebar.NavButton>
</Menu.Trigger>
<Menu.Content>
<Menu.Item value="profile">Profile</Menu.Item>
<Menu.Item value="settings">Workspace settings</Menu.Item>
<Menu.Separator />
<Menu.Item value="signout">Sign out</Menu.Item>
</Menu.Content>
</Menu.Root>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Sidebar.Group>
</Sidebar.Footer>
</Sidebar.Root>
</Sidebar.Provider>
)
}
Toggling the sidebar
Sidebar.Trigger toggles the sidebar open and closed. Render one in the
sidebar header to collapse it and one in your page header to re-open it. The
_open condition can be used to hide the trigger while the sidebar is open.
Dashboard
Use the toggle in the sidebar header to collapse the sidebar, and the one in the page header to open it again.
'use client'
import { HStack } from '@chakra-ui/react'
import { AppShell } from '#components/ui/app-shell'
import { IconButton } from '#components/ui/icon-button'
import { Page } from '#components/ui/page'
import { Sidebar } from '#components/ui/sidebar'
import { LuHouse, LuInbox, LuPanelLeft, LuUsers } from 'react-icons/lu'
export const SidebarToggle = () => {
return (
<Sidebar.Provider>
<AppShell
height="400px"
overflow="hidden"
sidebar={
<Sidebar.Root width="240px">
<Sidebar.Header ps="4" direction="row" alignItems="center">
<HStack flex="1" fontWeight="medium" textStyle="sm">
Acme Inc
</HStack>
<Sidebar.Trigger asChild>
<IconButton
variant="ghost"
size="sm"
aria-label="Close sidebar"
>
<LuPanelLeft />
</IconButton>
</Sidebar.Trigger>
</Sidebar.Header>
<Sidebar.Body>
<Sidebar.Group>
<Sidebar.GroupContent>
<Sidebar.NavItem>
<Sidebar.NavButton active>
<LuHouse /> Dashboard
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuInbox /> Inbox
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuUsers /> Contacts
</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Sidebar.Group>
</Sidebar.Body>
</Sidebar.Root>
}
>
<Page.Root>
<Page.Header
title="Dashboard"
nav={
<Sidebar.Trigger asChild>
<IconButton
variant="ghost"
size="sm"
aria-label="Open sidebar"
_open={{ display: 'none' }}
>
<LuPanelLeft />
</IconButton>
</Sidebar.Trigger>
}
/>
<Page.Body textStyle="sm">
Use the toggle in the sidebar header to collapse the sidebar, and
the one in the page header to open it again.
</Page.Body>
</Page.Root>
</AppShell>
</Sidebar.Provider>
)
}
Flyout mode
In flyout mode the sidebar stays hidden and flies out over your content
when the cursor reaches the edge of the screen, similar to Notion or Linear.
Render a Sidebar.FlyoutTrigger to activate it and a Sidebar.Backdrop to
close it when the cursor leaves. Flyout mode is only available on desktop, on
mobile the sidebar falls back to collapsible mode.
Move your cursor to the left edge to open the sidebar. It closes again when you move away.
'use client'
import { Box } from '@chakra-ui/react'
import { Sidebar } from '#components/ui/sidebar'
import { LuHouse, LuInbox, LuUsers } from 'react-icons/lu'
export const SidebarFlyout = () => {
return (
<Box
position="relative"
height="400px"
overflow="hidden"
// Contains the flyout within the example, not needed in your app
transform="translateZ(0)"
>
<Sidebar.Provider mode="flyout">
<Sidebar.FlyoutTrigger />
<Sidebar.Root>
<Sidebar.Body>
<Sidebar.Group>
<Sidebar.GroupContent>
<Sidebar.NavItem>
<Sidebar.NavButton active>
<LuHouse /> Dashboard
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuInbox /> Inbox
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuUsers /> Contacts
</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Sidebar.Group>
</Sidebar.Body>
</Sidebar.Root>
<Sidebar.Backdrop />
<Box p="8" textStyle="sm" color="fg.muted">
Move your cursor to the left edge to open the sidebar. It closes again
when you move away.
</Box>
</Sidebar.Provider>
</Box>
)
}
Controlled
Control the open state yourself with the open and onOpenChange props on
Sidebar.Provider, for example to persist the state or toggle the sidebar
from elsewhere in your app. Alternatively you can use the useSidebar hook
inside the provider to access open, setOpen and toggle.
Dashboard
'use client'
import { useState } from 'react'
import { AppShell } from '#components/ui/app-shell'
import { Button } from '#components/ui/button'
import { Page } from '#components/ui/page'
import { Sidebar } from '#components/ui/sidebar'
import { LuHouse, LuInbox, LuUsers } from 'react-icons/lu'
export const SidebarControlled = () => {
const [open, setOpen] = useState(true)
return (
<Sidebar.Provider open={open} onOpenChange={({ open }) => setOpen(open)}>
<AppShell
height="400px"
overflow="hidden"
sidebar={
<Sidebar.Root width="240px">
<Sidebar.Body>
<Sidebar.Group>
<Sidebar.GroupContent>
<Sidebar.NavItem>
<Sidebar.NavButton active>
<LuHouse /> Dashboard
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuInbox /> Inbox
</Sidebar.NavButton>
</Sidebar.NavItem>
<Sidebar.NavItem>
<Sidebar.NavButton>
<LuUsers /> Contacts
</Sidebar.NavButton>
</Sidebar.NavItem>
</Sidebar.GroupContent>
</Sidebar.Group>
</Sidebar.Body>
</Sidebar.Root>
}
>
<Page.Root>
<Page.Header title="Dashboard" />
<Page.Body>
<Button variant="outline" onClick={() => setOpen(!open)}>
{open ? 'Close' : 'Open'} sidebar
</Button>
</Page.Body>
</Page.Root>
</AppShell>
</Sidebar.Provider>
)
}
Props
Provider
| Prop | Default | Description |
|---|---|---|
mode | 'collapsible' | 'collapsible' | 'flyout' — Flyout mode is only available on desktop. |
variant | 'sidebar' | 'sidebar' | 'inset' — Inset renders the main content as a raised panel. |
defaultOpen | true | The initial visibility of the sidebar. |
open | Controlled visibility of the sidebar. | |
onOpenChange | Callback invoked when the visibility changes. | |
onModeChange | Callback invoked when the mode changes. |
NavItem
| Prop | Default | Description |
|---|---|---|
size | 'md' | 'sm' | 'md' | 'lg' — The size of the nav item. |
active | false | Set on NavButton to mark the current page. |