Sidebar
A side-navigation menu.
Usage
import {
Sidebar,
SidebarItems,
SidebarItemGroup,
SidebarItem,
} from "@sihaxito/deluxe-ui";<Sidebar>
<SidebarItems>
<SidebarItemGroup>
<SidebarItem></SidebarItem>
<SidebarItem></SidebarItem>
</SidebarItemGroup>
</SidebarItems>
</Sidebar>Controlled state
Collapsible
You can pass collapsed and onCollapsedChange to the Sidebar component to handle manually the collapsed state. You can use a React global context or a useState.
Open
Similar to collapsible, you can pass open and onOpenChange to the Sidebar component to handle manually the open state. You can use a React global context or a useState.
Examples
Collapsible
Deluxe UI exposes a component called SidebarHeadToggle to handle the expand/collapse automatically. Alternatively you can handle this manually by passing the props collapsed and onCollapsedChange to the Sidebar component and render your custom button. See an example here controlled state.
With header
Example sidebar/header not found.
With footer
Example sidebar/footer not found.