Sidebar
The Sidebar component provides a vertical navigation menu or content area that complements the main content of the application. It can include links, menus, icons, header and footer.
| Type | Resource |
|---|---|
| Design | Figma |
| Web | Web Storybook |
| Code | Gitlab |
Usage
import { PreviewSidebar } from 'bio-bind-ui';<Sidebar
active='consulting'
contents={[]}
header={
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<Image src="https://www.biofarma.co.id/media/image/thumbs/post/2023/10/05/logo-biofarma-group-8256-340_thumb.png" alt="" width={138} height={48} />
</div>
}
footer={<Footer mode={mode} />}
mode={mode as 'light'} />Examples
Mode (optional)
Use mode to use dark or light
Variant (optional)
Use variant rating by using stars or thumb icon.
Props
| Props | Required | Default | Type | Description |
|---|---|---|---|---|
| id | false | - | string | The unique identifier for the component. |
| style | false | - | CSSProperties | Custom inline styles for the sidebar container. |
| mode | false | "light" | "light" | "dark" | The color mode of the sidebar. Defaults to light mode. |
| header | false | - | ReactNode | A custom header element displayed at the top of the sidebar. |
| footer | false | - | ReactNode | A custom footer element displayed at the bottom of the sidebar. |
| contents | true | - | ContentProps[] | An array of content groups with menu items to display in the sidebar. |
| onClick | false | - | (item: MenuItems) => void | Callback triggered when a menu item is clicked. |
| active | false | - | string | The key or ID of the currently active menu item. |