Sidebar
The Sidebar component is a versatile navigation element that provides a consistent and accessible way to display a menu of options or links on the side of a page. It is highly customizable and can be used to enhance user navigation by providing quick access to different sections or features of an application.
Usage
- Use this component to provide a persistent navigation menu, allowing users to easily access various sections or functionalities within the application.
- Perfect for dashboards where users need quick access to tools, reports, or settings.
- Suitable for content-heavy applications, enabling users to switch seamlessly between different content categories or pages.
Anatomy
The sidebar includes a menu icon, a menu label with an active state, a badge, and a collapse/expand icon.
Variant
Sidebar variants include with collasible and without collasible
Without Collasible Sidebar
With Collasible Sidebar
Options
Sidebar is available in different options like with nested and without nested.
With Nested Sidebar
Without Nested Sidebar
Specifications
Structure and spacing measurements for sidebar.
Live Demo
The sidebar is demonstrated in a live environment in this demo.