Sidebar

A composable, themeable and customizable sidebar component.

About

The sidebar component is highly flexible and follows the patterns of popular UI libraries. It supports multiple variants like floating, inset, and standard sidebar layouts, with built-in support for collapsible sections and icon-only states.

Installation

Run the following command to install the sidebar component:

Theming

Add the following variables to your CSS file to theme the sidebar:

theme.css

Usage

Import the sidebar components in your layout:

sidebar-usage.ts

Sidebar Configuration Provider

Configure global sidebar settings like width and breakpoints in your app.config.ts:

app.config.ts

Application Sidebar

A basic sidebar with menu items and an inset main content area.

Application

Dashboard

Select an item from the sidebar to navigate.

Variants (Floating & Inset)

Demonstration of floating sidebars and inset main content layouts with semantic colors.

Floating Menu

Floating Workspace

The sidebar floats above the main content area with a shadow and rounded corners, perfect for focused tools and utilities.

Inset Data

Inset Explorer

The main content is inset with its own background and borders, creating a clear modern separation for administrative dashboards.

Collapsible & Submenus

Sidebars with collapsible groups, nested submenus, and footer profiles.

Main Content Display

Group & Menu Actions

Add interactive actions to groups and menu items, including dropdown menus.

Active Projects

Project Workspace

Select a project to see actions

Deeply Nested Hierarchies

Support for complex application structures with multi-level nested submenus.

Platform Architecture
Content Canvas

Themed & Feature-Rich

A full-featured sidebar with header switchers, badges, and custom dark themes.

Main Navigation

API Reference

Brain API

Service/DirectiveSelectorDescription
HlmSidebarService -Handles state (expanded/collapsed) and persistence.
BrnSidebarTrigger [brnSidebarTrigger]Core logic for toggling the sidebar.

Helm API

DirectiveSelectorDescription
HlmSidebarhlm-sidebarThe root sidebar component.
HlmSidebarContent [hlmSidebarContent]Container for the scrollable part of the sidebar.
HlmSidebarGroup [hlmSidebarGroup]A logical group of menu items.
HlmSidebarMenu[hlmSidebarMenu]A list of menu items.
HlmSidebarMenuItem [hlmSidebarMenuItem]A wrapper for a menu button or link.
HlmSidebarMenuButton [hlmSidebarMenuButton]The interactive part of a menu item.