BottomNav

BottomNav

<BottomNav label="Primary">
  <BottomNav.Item icon={<HomeIcon />} active>Home</BottomNav.Item>
  <BottomNav.Item icon={<SearchIcon />}>Browse</BottomNav.Item>
  <BottomNav.Item icon={<BellIcon />} badge={3}>Activity</BottomNav.Item>
  <BottomNav.Item icon={<UserIcon />} badge>Me</BottomNav.Item>
</BottomNav>

Install: @helixui/core

import { BottomNav } from '@helixui/core'

status: stable · since: 0.5.0

Tags: mobile, tabs, fixed-bottom, tab-bar, primary-nav

Anatomy

┌────────────────────────────────────────────────┐  ← page content scrolls
│                                                │
├────────────────────────────────────────────────┤
│   ⌂ Home    ⊙ Search    ◎ Profile              │  ← BottomNav (fixed)
└────────────────────────────────────────────────┘

Layout

• display — fixed
• width — fill
• height — content
• intrinsicSize — pinned to bottom edge, ~56-64px tall
• stackable — false
• fullBleed — true

Visual

A fixed bottom bar with 3–5 evenly spaced items, each an icon over a tiny label. Active item uses brand foreground; inactive use muted text. Optional Badge/dot floats at top-right of the icon. On notch devices, padding reads env(safe-area-inset-bottom).

Props

Name	Type	Default	Description
label	string	Primary	aria-label on the wrapping <nav>.

Slots

• BottomNav.Item — anchor (when href) or button. Props: icon, active (sets aria-current="page"), badge (number → count, true → dot).

Tokens used

color.bg.surface.default, color.bg.action.danger.default, color.text.secondary, color.text.action.brand, color.text.on.danger, color.border.default, color.border.focus, radius.full, font.family.sans, font.size.xs, font.weight.medium, font.weight.semibold

Accessibility

Notes

• Wrapped in <nav aria-label>. Active item is rendered with aria-current="page".
• Includes padding-bottom: env(safe-area-inset-bottom) so it sits above the iOS home indicator when used as a fixed bar.

Composes with

Component	Relation	Note
SafeArea	parent	Wrap in SafeArea on mobile builds for inset.
Sidebar	alternative	Sidebar is desktop primary nav; BottomNav is mobile.
Tabs	alternative	Tabs for in-page section switching; BottomNav for app-level nav.
FAB	sibling
AppShell	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

mobile primary nav

“three-tab bottom bar Home, Search, Profile”

<BottomNav>
  <BottomNav.Item href="/" icon={<HomeIcon />} active>Home</BottomNav.Item>
  <BottomNav.Item href="/search" icon={<SearchIcon />}>Search</BottomNav.Item>
  <BottomNav.Item href="/me" icon={<UserIcon />}>Profile</BottomNav.Item>
</BottomNav>

tab with unread dot

“show a dot badge on Inbox”

<BottomNav.Item href="/inbox" icon={<InboxIcon />} badge="dot">Inbox</BottomNav.Item>

Related

• SafeArea
• FAB
• AppShell