Bottom Nav

Mobile bottom bar with icon and label items. The active item gets an accent-primary glow underline on a surface-overlay background with backdrop blur.

Components

Bottom Nav

navigation

interactive

<arc-bottom-nav>

Overview

BottomNav is a fixed-position navigation bar anchored to the bottom of the viewport, for mobile and touch-first interfaces. It renders a row of icon-and-label items, and the active one is highlighted with an accent-primary glow underline and a frosted surface-overlay background with backdrop blur. The component follows the mobile navigation pattern used by native apps: three to five top-level destinations, each represented by an icon above a short label. Tapping an item dispatches an `arc-change` event so your application can update the active route. The `value` prop controls which item is currently selected, for controlled or uncontrolled usage. BottomNav complements TopBar: use TopBar for desktop viewports and swap in BottomNav at mobile breakpoints. The backdrop blur keeps the bar legible when content scrolls beneath it. For deeper hierarchical navigation on mobile, pair BottomNav with a Drawer or Sheet for secondary menu levels.

Guidelines

When to use

Limit to three to five items; more will crowd the bar on small screens
Use recognizable icons with short labels (one to two words)
Show BottomNav only on mobile breakpoints. Use TopBar or Sidebar on desktop
Set the value prop to match the current route for correct highlighting
Pair with a Drawer or Sheet for deeper navigation within a section

When not to use

Do not display BottomNav and TopBar navigation simultaneously on the same viewport
Do not use labels longer than two words; they will truncate on narrow screens
Do not add more than five items. Prioritize the most important destinations
Do not use BottomNav for actions (like "Create" or "Delete"); it is for navigation only
Do not forget to provide icons; label-only items break the expected mobile pattern

Features

Fixed bottom positioning for mobile-first navigation
Icon + label items for scannable touch targets
Accent-primary glow underline on the active item
Surface-overlay background with backdrop blur
`arc-change` event on item selection
Controlled value prop for external state management
Supports three to five navigation destinations
Keyboard accessible with arrow key navigation
Token-driven theming via CSS custom properties

Preview

Usage

This component requires JavaScript. No pure HTML/CSS version is available. Use the Web Component directly or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<arc-bottom-nav
  value="home"
  items='[
    { "label": "Home", "icon": "house", "value": "home" },
    { "label": "Search", "icon": "magnifying-glass", "value": "search" },
    { "label": "Profile", "icon": "user", "value": "profile" },
    { "label": "Settings", "icon": "gear", "value": "settings" }
  ]'
  id="nav"
></arc-bottom-nav>

<script>
  document.querySelector('#nav').addEventListener('arc-change', (e) => {
    console.log('navigate:', e.detail.value);
  });
</script>

import { BottomNav } from '@arclux/arc-ui-react';

const items = [
  { label: 'Home', icon: 'home', value: 'home' },
  { label: 'Search', icon: 'search', value: 'search' },
  { label: 'Profile', icon: 'user', value: 'profile' },
  { label: 'Settings', icon: 'settings', value: 'settings' },
];

export function MobileNav() {
  return (
    <BottomNav
      items={items}
      value="home"
      onArcChange={(e) => console.log('navigate:', e.detail.value)}
    />
  );
}

<script setup>
import { BottomNav } from '@arclux/arc-ui-vue';

const items = [
  { label: 'Home', icon: 'home', value: 'home' },
  { label: 'Search', icon: 'search', value: 'search' },
  { label: 'Profile', icon: 'user', value: 'profile' },
  { label: 'Settings', icon: 'settings', value: 'settings' },
];

function onChange(e) {
  console.log('navigate:', e.detail.value);
}
</script>

<template>
  <BottomNav :items="items" value="home" @arc-change="onChange" />
</template>

<script>
  import { BottomNav } from '@arclux/arc-ui-svelte';

  const items = [
    { label: 'Home', icon: 'home', value: 'home' },
    { label: 'Search', icon: 'search', value: 'search' },
    { label: 'Profile', icon: 'user', value: 'profile' },
    { label: 'Settings', icon: 'settings', value: 'settings' },
  ];
</script>

<BottomNav
  {items}
  value="home"
  on:arc-change={(e) => console.log('navigate:', e.detail.value)}
/>

import { Component } from '@angular/core';
import { BottomNav } from '@arclux/arc-ui-angular';

@Component({
  imports: [BottomNav],
  template: `
    <arc-bottom-nav
      [items]="items"
      value="home"
      (arc-change)="onChange($event)"
    />
  `,
})
export class MobileNavComponent {
  items = [
    { label: 'Home', icon: 'home', value: 'home' },
    { label: 'Search', icon: 'search', value: 'search' },
    { label: 'Profile', icon: 'user', value: 'profile' },
    { label: 'Settings', icon: 'settings', value: 'settings' },
  ];

  onChange(e: CustomEvent) {
    console.log('navigate:', e.detail.value);
  }
}

import { BottomNav } from '@arclux/arc-ui-solid';

const items = [
  { label: 'Home', icon: 'home', value: 'home' },
  { label: 'Search', icon: 'search', value: 'search' },
  { label: 'Profile', icon: 'user', value: 'profile' },
  { label: 'Settings', icon: 'settings', value: 'settings' },
];

export function MobileNav() {
  return (
    <BottomNav
      items={items}
      value="home"
      onArcChange={(e) => console.log('navigate:', e.detail.value)}
    />
  );
}

import { BottomNav } from '@arclux/arc-ui-preact';

const items = [
  { label: 'Home', icon: 'home', value: 'home' },
  { label: 'Search', icon: 'search', value: 'search' },
  { label: 'Profile', icon: 'user', value: 'profile' },
  { label: 'Settings', icon: 'settings', value: 'settings' },
];

export function MobileNav() {
  return (
    <BottomNav
      items={items}
      value="home"
      onArcChange={(e) => console.log('navigate:', e.detail.value)}
    />
  );
}

API

itemsArray<{label: string, icon?: string, value: string}>=[]: Array of navigation items, each with a label, icon name, and value identifier.
valuestring='': The value of the currently active item. Controls which item is highlighted.

Events

arc-changedetail:{ value: string }: Fired when an item is tapped with detail: { value }.

Bottom Nav

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight