Define breakpoints for the mobile nav.
Sidebar
Side navigation, commonly used as the primary navigation.
Import#
Sidebar
: The container component that manages state.SidebarSection
: A sidebar section.SidebarToggleButton
: Button to toggle the sidebar visibility.SidebarOverlay
: Background overlay visible when the sidebar is open on mobile.NavGroup
: A group of navigation items.NavItem
: A navigation item.
import {Sidebar,SidebarSection,SidebarToggleButton,SidebarOverlay,NavGroup,NavItem,} from '@saas-ui/sidebar'
Usage#
The Sidebar is currently in beta, we'd love to hear your feedback while we finalize the API. Please note that you need to import the components from
@saas-ui/sidebar
instead of@saas-ui/react
while in beta.
Basic#
<AppShellsidebar={<Sidebar><SidebarToggleButton /><SidebarSection direction="row"><Imagesrc="https://saas-ui.dev/favicons/favicon-96x96.png"boxSize="7"/><Spacer /><Menu><MenuButtonas={IconButton}icon={<PersonaAvatarpresence="online"size="xs"src="/showcase-avatar.jpg"/>}variant="ghost"/><MenuList><MenuItem>Sign out</MenuItem></MenuList></Menu></SidebarSection><SidebarSection aria-label="Main"><NavItem icon={<FiHome />} isActive>Home</NavItem><NavItem icon={<FiUsers />}>Users</NavItem><NavItem icon={<FiSettings />}>Settings</NavItem></SidebarSection></Sidebar>}/>
Grouped items#
<AppShellsidebar={<Sidebar><SidebarToggleButton /><SidebarSection direction="row"><Imagesrc="https://saas-ui.dev/favicons/favicon-96x96.png"boxSize="7"/><Spacer /><Menu><MenuButtonas={IconButton}icon={<PersonaAvatarpresence="online"size="xs"src="/showcase-avatar.jpg"/>}variant="ghost"/><MenuList><MenuItem>Sign out</MenuItem></MenuList></Menu></SidebarSection><SidebarSection aria-label="Main"><NavGroup><NavItem icon={<FiHome />} isActive>Home</NavItem><NavItem icon={<FiUsers />}>Users</NavItem><NavItem icon={<FiSettings />}>Settings</NavItem></NavGroup><NavGroup title="Teams" isCollapsible><NavItem>Sales</NavItem><NavItem>Support</NavItem></NavGroup></SidebarSection></Sidebar>}/>
Scroll#
<AppShellsidebar={<Sidebar><SidebarToggleButton /><SidebarSection direction="row"><Imagesrc="https://saas-ui.dev/favicons/favicon-96x96.png"boxSize="7"/><Spacer /><Menu><MenuButtonas={IconButton}icon={<PersonaAvatarpresence="online"size="xs"src="/showcase-avatar.jpg"/>}variant="ghost"/><MenuList><MenuItem>Sign out</MenuItem></MenuList></Menu></SidebarSection><SidebarSection flex="1" overflowY="auto"><NavGroup><NavItem icon={<FiHome />} isActive>Home</NavItem><NavItem icon={<FiUsers />}>Users</NavItem><NavItem icon={<FiSettings />}>Settings</NavItem></NavGroup><NavGroup title="Teams" isCollapsible><NavItem>Sales</NavItem><NavItem>Support</NavItem></NavGroup><NavGroup title="Tags" isCollapsible><NavItemicon={<Badge bg="purple.500" boxSize="2" borderRadius="full" />}><Text>Lead</Text><Badge opacity="0.6" borderRadius="full" bg="none" ms="auto">83</Badge></NavItem><NavItemicon={<Badge bg="cyan.500" boxSize="2" borderRadius="full" />}><Text>Customer</Text><Badge opacity="0.6" borderRadius="full" bg="none" ms="auto">210</Badge></NavItem></NavGroup></SidebarSection><SidebarSection><NavItem icon={<FiHelpCircle />}>Documentation</NavItem></SidebarSection></Sidebar>}/>
Condensed variant#
The condensed variant can be used as a collapsed state on smaller screens, or as the primary navigation in a double sidebar layout, see below. NavItem labels will be rendered as tooltips.
Use the tooltipProps
prop to customize the tooltip.
<AppShellsidebar={<Sidebar variant="condensed" width="64px"><SidebarToggleButton /><SidebarSection alignItems="center"><Imagesrc="https://saas-ui.dev/favicons/favicon-96x96.png"boxSize="7"/></SidebarSection><SidebarSection><NavItem icon={<FiHome size="1.2em" />} size="md">Home</NavItem><NavItem icon={<FiUsers size="1.2em" />} size="md">Users</NavItem><NavItem icon={<FiSettings size="1.2em" />} size="md">Settings</NavItem></SidebarSection></Sidebar>}/>
Toggle variant#
function ToggleVariant() {const { isOpen, onToggle } = useDisclosure({defaultIsOpen: true,})return (<AppShellsidebar={<Sidebarbreakpoints={{ base: false }}variant={isOpen ? 'default' : 'condensed'}transition="width"transitionDuration="normal"width={isOpen ? '280px' : '14'}minWidth="auto"><SidebarSection direction={isOpen ? 'row' : 'column'}><Imagesrc="https://saas-ui.dev/favicons/favicon-96x96.png"boxSize="7"mb="1"display={isOpen ? 'block' : 'none'}/><Spacer /><IconButtononClick={onToggle}variant="ghost"size="sm"icon={isOpen ? <FiChevronsLeft /> : <FiChevronsRight />}aria-label="Toggle Sidebar"/></SidebarSection><SidebarSection flex="1" overflowY="auto" overflowX="hidden"><NavGroup><NavItem icon={<FiHome />} isActive>All users</NavItem><NavItem icon={<StarIcon />}>Favourite users</NavItem></NavGroup></SidebarSection><SidebarOverlay zIndex="1" /></Sidebar>}/>)}
Double sidebar#
You can stack multiple sidebars together to create a double sidebar layout.
<AppShellsidebar={<HStack spacing="0" alignItems="stretch"><Sidebar variant="condensed" bg="purple.500" borderWidth="0" spacing="3"><SidebarSection><Imagesrc="https://saas-ui.dev/favicons/favicon-96x96.png"boxSize="7"/></SidebarSection><SidebarSection><NavItem icon={<FiHome size="1.2em" color="white" />}>Home</NavItem><NavItem icon={<FiUsers size="1.2em" color="white" />} isActive>Users</NavItem><NavItem icon={<FiSettings size="1.2em" color="white" />}>Settings</NavItem></SidebarSection></Sidebar><Sidebar><SidebarSection direction="row" mt="2" px="4"><Heading size="sm" fontWeight="semibold">Users</Heading></SidebarSection><SidebarSection flex="1" overflowY="auto"><NavGroup><NavItem icon={<FiUsers />} isActive>Overview</NavItem></NavGroup><NavGroup title="Teams" isCollapsible><NavItem>Sales</NavItem><NavItem>Support</NavItem></NavGroup><NavGroup title="Tags" isCollapsible><NavItemicon={<Badge bg="purple.500" boxSize="2" borderRadius="full" />}><Text>Lead</Text><Badge opacity="0.6" borderRadius="full" bg="none" ms="auto">83</Badge></NavItem><NavItemicon={<Badge bg="cyan.500" boxSize="2" borderRadius="full" />}><Text>Customer</Text><Badge opacity="0.6" borderRadius="full" bg="none" ms="auto">210</Badge></NavItem></NavGroup></SidebarSection><SidebarSection><NavItem icon={<FiHelpCircle />}>Documentation</NavItem></SidebarSection></Sidebar></HStack>}/>
Breakpoints#
The sidebar will automatically close on small screens. You can change this behavior by customizing the breakpoints.
Default breakpoints.
<Sidebar breakpoints={{ base: true, lg: false }} />
Disabling closing the sidebar on small screens.
<AppShellsidebar={<Sidebar breakpoints={{ base: false }}><SidebarToggleButton /><SidebarSection direction="row"><Imagesrc="https://saas-ui.dev/favicons/favicon-96x96.png"boxSize="7"/><Spacer /><Menu><MenuButtonas={IconButton}icon={<PersonaAvatarpresence="online"size="xs"src="/showcase-avatar.jpg"/>}variant="ghost"/><MenuList><MenuItem>Sign out</MenuItem></MenuList></Menu></SidebarSection><SidebarSection aria-label="Main"><NavItem icon={<FiHome />} isActive>Home</NavItem><NavItem icon={<FiUsers />}>Users</NavItem><NavItem icon={<FiSettings />}>Settings</NavItem></SidebarSection><SidebarOverlay /></Sidebar>}/>
Props#
The Sidebar
component and all sub components accept all Box
properties.
Sidebar Props#
breakpoints
breakpoints
Record<string, boolean>
object { sm: true, lg: false }
isOpen
isOpen
boolean
motionPreset
motionPreset
"none" | "slideInOut"
onClose
onClose
(() => void)
onOpen
onOpen
(() => void)
spacing
spacing
Spacing between child elements.
ResponsiveValue<Union<number | "initial" | "inherit" | (string & {}) | "px" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "auto" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | ... 55 more ... | "-3.5">>
SidebarSection Props#
direction
direction
ResponsiveValue<"row" | "column">
SidebarToggleButton Props#
icon
icon
MaybeRenderProp<{ isOpen: boolean; }>
SidebarOverlay Props#
NavGroup Props#
defaultIsOpen
defaultIsOpen
boolean
icon
icon
ReactElement<any, string | JSXElementConstructor<any>>
isCollapsible
isCollapsible
boolean
onClose
onClose
(() => void)
onOpen
onOpen
(() => void)
title
title
ReactNode
NavItem Props#
label
required
label
required
string
href
href
string
icon
icon
ReactElement<any, string | JSXElementConstructor<any>>
isActive
isActive
boolean
tooltip
tooltip
ReactNode
Was this helpful?