The sidebar component can be used as a complementary element relative to the navbar shown on either the left or right side of the page used for the navigation on your web application, including menu items, multi-level dropdown items, call to actions elements, and more.
Disclaimer: this sidebar component is based on this sidebar menu plugin.
Default sidebar
Use this example to show a responsive list of menu items inside the sidebar with icons and labels.
Adding links and active class
Utilize the `href` prop within the `SidebarItem` component to incorporate a hyperlink. To initiate the application of the active class, include the `activeUrl` prop within the `Sidebar` component: Control the `active` and `nonactive` class by using `activeClass` and `nonActiveClass`: You can control icon class by changing the `class` prop in the `Icon` component.
Multi-level dropdown
Use this sidebar example to create multi-level menu items by using the SidebarDropdownWrapper and SidebarDropdownItem components. You can change the icons using `arrowup` and `arrowdown` slots.
Content separator
Separate the content inside the sidebar component by applying a border separator to the SidebarGroup component.
CTA button
Use this example to add a CTA button inside the sidebar component and encourage your users to visit the dedicated page.
Logo branding
Show the logo of your brand and link back to the homepage from the top part of the sidebar.
Transition
You can add own transition by setting `transitionType` and `transitionParams`.