Sidebar

Side navigation, commonly used as the primary navigation in web applications.

Props

The Sidebar component and all sub components accept all Box properties.

Sidebar Props

PropTypeDefaultDescription
colorScheme"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | "primary" | "secondary" | "indigo"The visual color appearance of the component
isOpenbooleanControl the visibility of the sidebar.
motionPreset"none" | "slideInOut"The transition used when opening and closing the sidebar.
onAnimationStart(definition: AnimationDefinition) => voidCallback when animation defined in animate begins. The provided callback will be called with the triggering animation definition. If this is a variant, it'll be the variant name, and if a target object then it'll be the target object. This way, it's possible to figure out which animation has started. ```jsx function onStart() { console.log("Animation started") } <motion.div animate={{ x: 100 }} onAnimationStart={onStart} /> ```
onClose() => voidCallback invoked when the sidebar is closed.
onDrag( event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo, ) => voidCallback function that fires when the component is dragged. ```jsx <motion.div drag onDrag={ (event, info) => console.log(info.point.x, info.point.y) } /> ```
onDragEnd( event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo, ) => voidCallback function that fires when dragging ends. ```jsx <motion.div drag onDragEnd={ (event, info) => console.log(info.point.x, info.point.y) } /> ```
onDragStart( event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo, ) => voidCallback function that fires when dragging starts. ```jsx <motion.div drag onDragStart={ (event, info) => console.log(info.point.x, info.point.y) } /> ```
onOpen() => voidCallback invoked when the sidebar is opened.
sizestringThe size of the Sidebar
spacingResponsiveValue<number | (string & {}) | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | ... 54 more ... | "-3.5">Spacing between child elements.
toggleBreakpointfalse | "sm" | "md" | "lg" | "xl" | "2xl"lgDefine the for the mobile nav. Use false to disable the mobile nav.
variant"default" | "compact"defaultThe variant of the Sidebar

SidebarSection Props

PropTypeDefaultDescription
directionResponsiveValue<FlexDirection>

SidebarToggleButton Props

PropTypeDefaultDescription
iconstring | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ((props: { ... }) => ReactNode)
isActivebooleanfalseIf true, the button will be styled in its active state.
isDisabledbooleanfalseIf true, the button will be disabled.
isLoadingbooleanfalseIf true, the button will show a spinner.
isRoundbooleanfalseIf true, the button will be perfectly round. Else, it'll be slightly round
spinnerReactElement<any, string | JSXElementConstructor<any>>Replace the spinner component when isLoading is set to true

SidebarOverlay Props

NavGroup Props

PropTypeDefaultDescription
colorScheme"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | "primary" | "secondary" | "indigo"The visual color appearance of the component
defaultIsOpenboolean
iconReactElement<any, string | JSXElementConstructor<any>>
isCollapsibleboolean
onClose() => void
onOpen() => void
sizestringThe size of the NavGroup
titlestring | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>
variantstringThe variant of the NavGroup

NavItem Props

PropTypeDefaultDescription
colorScheme"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | "primary" | "secondary" | "indigo"primaryThe visual color appearance of the component
hrefstringThe href attribute of the nav item, will be wrapped in a Link, if linkComponent is configured in SaasProvider.
iconReactElement<any, string | JSXElementConstructor<any>>Icon to be displayed in the nav item
insetResponsiveValue<number | (string & {}) | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | ... 53 more ... | "-3.5">Inset of the item, used for nested items
isActivebooleanIf true, the nav item will be active
size"xs" | "sm" | "md" | "lg"smThe size of the NavItem
tooltipPropsOmit<TooltipProps, "children">Props to be passed to the tooltip
variant"neutral" | "subtle" | "solid" | "left-accent"neutralThe variant of the NavItem

Was this helpful?