Navigation Bar

Bottom navigation bars allow movement between primary destinations in an app. They are ideal for mobile, appearing at the bottom of the screen with 3–5 destinations. Not intended for desktop layouts; use ds-navigation-rail or ds-navigation-drawer for wider viewports.

Basic Usage

A basic navigation bar with three destinations. One destination is always active. The bar sits at the bottom of the viewport providing persistent access to top-level sections without requiring a drawer or sidebar.

Home Search Profile 
<ds-navigation-bar>
  <ds-navigation-bar-item icon="home" value="home" active>Home</ds-navigation-bar-item>
  <ds-navigation-bar-item icon="search" value="search">Search</ds-navigation-bar-item>
  <ds-navigation-bar-item icon="person" value="profile">Profile</ds-navigation-bar-item>
</ds-navigation-bar>

With Badges

Navigation items can display badges for notifications or counts.

Home Notifications Messages Profile 
<ds-navigation-bar>
  <ds-navigation-bar-item icon="home" value="home" active>Home</ds-navigation-bar-item>
  <ds-navigation-bar-item icon="notifications" value="notifications" badge="5">Notifications</ds-navigation-bar-item>
  <ds-navigation-bar-item icon="chat" value="messages" badge="12">Messages</ds-navigation-bar-item>
  <ds-navigation-bar-item icon="person" value="profile">Profile</ds-navigation-bar-item>
</ds-navigation-bar>

Maximum Destinations

Navigation bars support 3-5 destinations. Five destinations is the maximum recommended.

Home Search Favorites Notifications Profile 
<ds-navigation-bar>
  <ds-navigation-bar-item icon="home" value="home" active>Home</ds-navigation-bar-item>
  <ds-navigation-bar-item icon="search" value="search">Search</ds-navigation-bar-item>
  <ds-navigation-bar-item icon="favorite" value="favorites">Favorites</ds-navigation-bar-item>
  <ds-navigation-bar-item icon="notifications" value="notifications" badge="3">Notifications</ds-navigation-bar-item>
  <ds-navigation-bar-item icon="person" value="profile">Profile</ds-navigation-bar-item>
</ds-navigation-bar>

States

Navigation items can be active or disabled.

Home Search Favorites Profile 
<ds-navigation-bar>
  <ds-navigation-bar-item icon="home" value="home" active>Home</ds-navigation-bar-item>
  <ds-navigation-bar-item icon="search" value="search">Search</ds-navigation-bar-item>
  <ds-navigation-bar-item icon="favorite" value="favorites" disabled>Favorites</ds-navigation-bar-item>
  <ds-navigation-bar-item icon="person" value="profile">Profile</ds-navigation-bar-item>
</ds-navigation-bar>

Interactive Demo

Try clicking different destinations to see the selection behavior.

Home Search Favorites Profile

Usage Guidelines

  • When to use: Mobile apps with 3–5 primary destinations of equal importance where persistent tab-level switching is needed without a page reload.
  • When not to use: Avoid on desktop — use ds-navigation-rail or ds-navigation-drawer instead. Do not use for more than five destinations or for secondary navigation within a section.
  • Composition: Always keep exactly one destination active. Pair short, universally understood icons with brief labels. Reserve badges for actionable notification counts only.
  • Common mistakes: Using more than five items makes the bar feel crowded. Avoid hiding or disabling the bar mid-flow — persistent presence builds orientation for mobile users.

API

DSNavigationBar

Container component for navigation items.

Events

Event Detail Description
ds-navigation-bar:select { value: string, label: string } Fired when a destination is selected

CSS Parts

Part Description
container The navigation bar container

DSNavigationBarItem

Individual navigation destination item.

Attributes

Attribute Type Default Description
value string - Value for this destination
icon string - Material Symbol icon name
label string - Destination label (or use slot content)
active boolean false Whether destination is active
disabled boolean false Whether destination is disabled
badge string - Badge content (number or text)

Events

Event Detail Description
ds-navigation-bar-item:click { value: string, label: string } Fired when item is clicked (not disabled)

CSS Parts

Part Description
container The item container button
icon The icon element
label The label text
indicator The active indicator
badge The badge element

CSS Custom Properties

Property Default Description
--ds-navigation-bar-hover-color --md-sys-color-on-surface Hover state layer background color
--ds-navigation-bar-hover-opacity 0.08 Hover state layer opacity
--ds-navigation-bar-pressed-opacity 0.12 Pressed/active state layer opacity
--ds-navigation-bar-active-bg --md-sys-color-secondary-container Active indicator background color

Accessibility

Keyboard Interaction

Key Context Expected Result
Tab Outside the bar Moves focus into the bar, onto the active item (the first enabled one if none is active). The bar is a single tab stop.
Tab / Shift+Tab Inside the bar Moves focus out of the bar. Tabbing back in returns to the active item.
ArrowRight / ArrowLeft Inside the bar Moves focus to the next / previous enabled item, wrapping at the ends. Does not select. In a right-to-left layout the two arrows swap.
Home / End Inside the bar Moves focus to the first / last enabled item
Enter / Space Focus on a item Selects the destination and fires the select event. Focus stays on it.

Semantics

  • The bar uses role="navigation"; each item uses role="tab".
  • Arrow keys move focus without selecting (manual activation), so moving between destinations doesn't navigate away on every key press. Selection happens on Enter, Space or a click.
  • Active items expose aria-selected="true"; disabled items expose aria-disabled="true".
  • Each item includes a descriptive aria-label for screen reader users.