Navigation
Sidebar
Utilize a sidebar component on both sides of the page to display a list of menu items, including multi-level navigation options, for easy website navigation.
Basic example
Default
Create a responsive sidebar menu that contains a list of items, each with an associated icon and label. Utilize the `[--auto-close:*]` responsive value, such as `sm`, `md`, `lg`, `xl`, or `2xl`, to automatically close the overlay based on the screen size.
Illustrations
Multiple level with separator
Use this example to create a multi-level sidebar by utilizing the collapse feature with the menu for collapsible items, and the divider component to create separators.
CTA button
Use this example to incorporate a CTA button within the sidebar, guiding users to visit the dedicated page.
Logo branding
Display your brand's logo and link it back to the homepage at the top of the sidebar.
With navbar
Use this example to demonstrate a layout that includes both a navbar and a sidebar for your web application.
Scoped based Sidebar
This example uses `:backdropParent:` to scope the backdrop within a specific block. By default, the backdrop has a `fixed` class applied. To customize the backdrop styling, you can use the `:backdropClasses` option, which completely overrides all default classes for the backdrop. Alternatively, to add additional classes while retaining the default ones, use the `:backdropExtraClasses` option. For more details about these options, please refer to the Overlay options.
Drawer sidebar
Use this example to implement drawer as an navigation component that appears when an element is clicked.