Bottom Nav — ARC UI

Components

Bottom Nav

navigation

interactive

<arc-bottom-nav>

Overview

Guidelines

When to use

Limit to three to five items — more will crowd the bar on small screens
Use recognisable 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

Display BottomNav and TopBar navigation simultaneously on the same viewport
Use labels longer than two words — they will truncate on narrow screens
Add more than five items — prioritise the most important destinations
Use BottomNav for actions (like "Create" or "Delete") — it is for navigation only
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: `
    <BottomNav
      [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

Prop	Type	Default	Description
`items`	`Array<{ label, icon, value }>`	`[]`	Array of navigation items, each with a label, icon name, and value identifier.
`value`	`string`	`''`	The value of the currently active item. Controls which item is highlighted.

Events

Event	Description
`arc-change`	Fired when an item is tapped with detail: { value }.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

ARC UI

Arclight