Navigation Rail
Material 3 Expressive Navigation Rail component for ergonomic side navigation.
Overview
The Navigation Rail is a compact, vertical navigation component designed for primary navigation in apps. It consists of three main components that work together to create a cohesive navigation experience.
m3-navigation-rail
Main container that holds navigation items and manages the expanded state.
m3-navigation-rail-item
Individual navigation items with icons, labels, and badge support.
m3-navigation-rail-toggle
Toggle button to expand/collapse the rail to show or hide labels.
Live Examples
Basic Navigation Rail
A simple navigation rail with three items. Click on items to see the active state change.
💡 Try it: Click the toggle button at the top to expand the rail and see labels appear next to icons.
Click on any navigation item to see it become active.
<m3-navigation-rail>
<m3-navigation-rail-toggle></m3-navigation-rail-toggle>
<m3-navigation-rail-item label="Home" active>
<span slot="icon" class="material-symbols-outlined">home</span>
</m3-navigation-rail-item>
</m3-navigation-rail>Navigation Rail with Badges
Badges can display notification counts or status indicators on navigation items.
📊 Badge Types:
- Number badges: Display counts (e.g., "12", "3")
- Dot badges: Show presence without counts (empty string)
- No badge: Standard item without indicators
<m3-navigation-rail-item label="Messages" badge="12">
<span slot="icon" class="material-symbols-outlined">mail</span>
</m3-navigation-rail-item>Navigation Rail with Bottom Items
Use the bottom slot for secondary actions like settings or profile access.
🔽 Bottom Slot: Items in the bottom slot are separated from main navigation and anchored to the bottom of the rail.
Perfect for settings, user profile, or help sections that should always be accessible.
<m3-navigation-rail-item slot="bottom" label="Settings">
<span slot="icon" class="material-symbols-outlined">settings</span>
</m3-navigation-rail-item>Basic Usage
<m3-navigation-rail>
<m3-navigation-rail-toggle></m3-navigation-rail-toggle>
<m3-navigation-rail-item label="Home" active>
<span slot="icon" class="material-symbols-outlined">home</span>
</m3-navigation-rail-item>
<m3-navigation-rail-item label="Search">
<span slot="icon" class="material-symbols-outlined">search</span>
</m3-navigation-rail-item>
</m3-navigation-rail>API Reference
m3-navigation-rail
Main container component for the navigation rail.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
expanded | boolean | false | Whether the rail is expanded to show labels |
Events
| Event | Detail | Description |
|---|---|---|
menu-toggle | { expanded: boolean } | Fired when the toggle button is clicked |
Slots
| Slot | Description |
|---|---|
| (default) | Navigation rail items and toggle |
bottom | Items anchored to the bottom of the rail |
m3-navigation-rail-item
Individual navigation item with icon and label.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
active | boolean | false | Whether the item is currently active/selected |
label | string | '' | Text label for the navigation item |
badge | string | '' | Badge text to display (empty string shows a dot) |
expanded | boolean | false | Automatically set by parent rail |
Events
| Event | Detail | Description |
|---|---|---|
item-click | { label: string } | Fired when the item is clicked |
Slots
| Slot | Description |
|---|---|
icon | SVG or icon element (24x24px recommended) |
m3-navigation-rail-toggle
Toggle button to expand/collapse the navigation rail.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
expanded | boolean | false | Whether the rail is expanded |
Events
| Event | Detail | Description |
|---|---|---|
toggle-click | { expanded: boolean } | Fired when toggle is clicked |
Framework Integration
Angular
// app.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@banegasn/m3-navigation-rail';
@Component({
selector: 'app-root',
template: `
<m3-navigation-rail>
<m3-navigation-rail-toggle></m3-navigation-rail-toggle>
<m3-navigation-rail-item
label="Home"
[active]="true"
(item-click)="onItemClick($event)"
>
<span slot="icon" class="material-symbols-outlined">home</span>
</m3-navigation-rail-item>
</m3-navigation-rail>
`,
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent {
onItemClick(event: CustomEvent) {
console.log('Clicked:', event.detail.label);
}
}React
import '@banegasn/m3-navigation-rail';
function App() {
const handleItemClick = (e) => {
console.log('Clicked:', e.detail.label);
};
return (
<m3-navigation-rail>
<m3-navigation-rail-toggle />
<m3-navigation-rail-item
label="Home"
active
onitem-click={handleItemClick}
>
<span slot="icon" class="material-symbols-outlined">home</span>
</m3-navigation-rail-item>
</m3-navigation-rail>
);
}Vue
<template>
<m3-navigation-rail>
<m3-navigation-rail-toggle />
<m3-navigation-rail-item
label="Home"
:active="true"
@item-click="handleItemClick"
>
<span slot="icon" class="material-symbols-outlined">home</span>
</m3-navigation-rail-item>
</m3-navigation-rail>
</template>
<script setup>
import '@banegasn/m3-navigation-rail';
const handleItemClick = (event) => {
console.log('Clicked:', event.detail.label);
};
</script>Live Example
💡 This website uses the Navigation Rail! The left sidebar you see on this page is built using the m3-navigation-rail component. Try clicking the toggle button to expand it and explore the different sections.