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#
| Prop | Type | Default | Description |
|---|---|---|---|
| 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 | |
| isOpen | boolean | Control the visibility of the sidebar. | |
| motionPreset | "none" | "slideInOut" | The transition used when opening and closing the sidebar. | |
| onAnimationStart | (definition: AnimationDefinition) => void | Callback 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 | () => void | Callback invoked when the sidebar is closed. | |
| onDrag | (
event: MouseEvent | TouchEvent | PointerEvent,
info: PanInfo,
) => void | Callback 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,
) => void | Callback 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,
) => void | Callback function that fires when dragging starts. ```jsx <motion.div drag onDragStart={ (event, info) => console.log(info.point.x, info.point.y) } /> ``` | |
| onOpen | () => void | Callback invoked when the sidebar is opened. | |
| size | string | The size of the Sidebar | |
| spacing | ResponsiveValue<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. | |
| toggleBreakpoint | false | "sm" | "md" | "lg" | "xl" | "2xl" | lg | Define the for the mobile nav. Use false to disable the mobile nav. |
| variant | "default" | "compact" | default | The variant of the Sidebar |
SidebarSection Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | ResponsiveValue<FlexDirection> |
SidebarToggleButton Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ((props: { ... }) => ReactNode) | ||
| isActive | boolean | false | If true, the button will be styled in its active state. |
| isDisabled | boolean | false | If true, the button will be disabled. |
| isLoading | boolean | false | If true, the button will show a spinner. |
| isRound | boolean | false | If true, the button will be perfectly round. Else, it'll be slightly round |
| spinner | ReactElement<any, string | JSXElementConstructor<any>> | Replace the spinner component when isLoading is set to true |
SidebarOverlay Props#
NavGroup Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| 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 | |
| defaultIsOpen | boolean | ||
| icon | ReactElement<any, string | JSXElementConstructor<any>> | ||
| isCollapsible | boolean | ||
| onClose | () => void | ||
| onOpen | () => void | ||
| size | string | The size of the NavGroup | |
| title | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ||
| variant | string | The variant of the NavGroup |
NavItem Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| colorScheme | "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | "primary" | "secondary" | "indigo" | primary | The visual color appearance of the component |
| href | string | The href attribute of the nav item,
will be wrapped in a Link, if linkComponent is configured in SaasProvider. | |
| icon | ReactElement<any, string | JSXElementConstructor<any>> | Icon to be displayed in the nav item | |
| inset | ResponsiveValue<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 | |
| isActive | boolean | If true, the nav item will be active | |
| size | "xs" | "sm" | "md" | "lg" | sm | The size of the NavItem |
| tooltipProps | Omit<TooltipProps, "children"> | Props to be passed to the tooltip | |
| variant | "neutral" | "subtle" | "solid" | "left-accent" | neutral | The variant of the NavItem |
Was this helpful?