RhombusKit

Bottom Nav

<rhombus-bottom-nav> is a Material-style bottom tab bar for mobile-first apps. Router items self-highlight via routerLinkActive; pass activeId / activeChange for controlled usage. Pair it with the app-shell's navMode="bottom".

Example

The bar spans the full width of its container; here it's framed at a phone width since it's a mobile-first component.

When to use

  • Use a bottom nav as the primary navigation for 3–5 top-level destinations on a mobile-first surface. For desktop-first apps prefer the app-shell sidenav.
  • When the destinations are persistent, equal-weight sections of the app that the user moves between frequently.

When not to use

  • For a desktop-first layout with a navigation rail or sidenav, reach for the App shell instead.
  • For switching between views within a single page or panel, use Tabs, not a global bottom bar.
  • For a flat list of one-off actions or commands, use a Menu or Overflow menu.

Related components

  • App shell — owns the responsive scaffold and pairs via navMode="bottom".
  • Tabs — in-page view switching.
  • Badge — the notification marker each item can carry.

Was this page helpful?