Sidebar Component

Axiom01 provides a flexible and responsive sidebar component, ideal for navigation, supplementary content, or application dashboards. It can be easily integrated into various layout structures.

Live Example

This is the main content area. The sidebar is on the left.

Resize your browser to see how the sidebar adapts to different screen sizes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML Structure

The sidebar component typically involves a main layout container, an <aside> for the sidebar, and a <main> element for the primary content.

<div class="sidebar-layout">
		 <aside class="sidebar">
				 <nav>
						 <h3>Main Menu</h3>
						 <ul>
								 <li><a href="#"><i class="fas fa-home"></i> Dashboard</a></li>
								 <li><a href="#"><i class="fas fa-user"></i> Profile</a></li>
						 </ul>
				 </nav>
		 </aside>
		 <main class="sidebar-content">
				 <p>This is the main content area.</p>
		 </main>
 </div>

Styling

The .sidebar-layout uses CSS Grid or Flexbox to arrange the sidebar and content. The .sidebar itself is styled with a background, padding, and potentially a border or shadow. Navigation links within the sidebar are styled for clarity and interactivity.

.sidebar-layout: Container for the entire layout, managing the positioning of the sidebar and content.
.sidebar: Styles the sidebar panel, including its width, background, and text color.
.sidebar-content: Styles the main content area, ensuring it flows correctly alongside the sidebar.
Navigation within the sidebar uses standard <nav>, <ul>, <li>, and <a> elements, inheriting Axiom01's base typography and link styles.

Responsive Behavior

For smaller screens, the sidebar typically collapses or transforms into an off-canvas menu, similar to the mobile navbar. This requires media queries to adjust the layout and potentially JavaScript to handle the toggle functionality.

Accessibility

Ensure the sidebar is accessible:

Use a semantic <aside> element for the sidebar.
Provide clear aria-label attributes for navigation elements within the sidebar.
If the sidebar is toggleable, ensure proper keyboard navigation and ARIA attributes (e.g., aria-expanded, aria-controls) are used on the toggle button.

Customization

Customize the appearance using Axiom01's CSS variables for colors, spacing, and typography. You can adjust the width of the sidebar, its background, and the styling of its navigation items to match your application's design.