Bottom tab bar

Items and counts

A bottom tab bar links the pages an app opens most on a phone. It docks flush with the bottom edge on the float fill, with a hairline above and the safe area padded inside.

• Items: each BottomTabBarItem is an icon over a one-line label. The page shown is an ink pill.
• Counts: a small ink chip at the icon's corner, with its words in the name. The Transactions tab below reads "Transactions, 12 to review".

The examples on this page sit in a phone frame, so the bar docks at the frame's bottom edge, not the window's.

import { BottomTabBar, BottomTabBarItem } from '@snapshot-ui/react';
import { ArrowLeftRight, Ellipsis, House, Target } from 'lucide-react';
import type { ReactElement } from 'react';

export default function BottomTabBarBasic(): ReactElement {
  return (
    <div className="stage-phone">
      <div style={{ padding: 'var(--spacing-inset)', overflowWrap: 'anywhere' }}>
        <p style={{ margin: '0 0 16px' }}>Spending is on track this month.</p>
        <p style={{ margin: 0 }}>Twelve transactions are waiting for a category.</p>
      </div>
      <BottomTabBar aria-label="Main">
        <BottomTabBarItem href="#home" icon={<House />} isCurrent>
          Home
        </BottomTabBarItem>
        <BottomTabBarItem href="#transactions" icon={<ArrowLeftRight />} count={12} countLabel="to review">
          Transactions
        </BottomTabBarItem>
        <BottomTabBarItem href="#goals" icon={<Target />}>
          Goals
        </BottomTabBarItem>
        <BottomTabBarItem icon={<Ellipsis />}>More</BottomTabBarItem>
      </BottomTabBar>
    </div>
  );
}

The More button

An item without href is a button. Wrap it in a SheetTrigger with a Sheet of the other pages to open the sheet, and it reports whether the sheet is open. Or pass onPress for your own action. isCurrent on a button draws the pill but sets no aria-current, since a button is not the page shown and the sheet carries its own current link.

import { BottomTabBar, BottomTabBarItem, Link, Sheet, SheetTrigger } from '@snapshot-ui/react';
import { ArrowLeftRight, Ellipsis, House, Target } from 'lucide-react';
import type { ReactElement } from 'react';

const PAGES = ['Accounts', 'Documents', 'Insights', 'Ask', 'Settings'];

export default function BottomTabBarMore(): ReactElement {
  return (
    <div className="stage-phone">
      <div style={{ padding: 'var(--spacing-inset)', overflowWrap: 'anywhere' }}>
        <p style={{ margin: 0 }}>More opens a sheet of the pages that have no tab.</p>
      </div>
      <BottomTabBar aria-label="Main, with More">
        <BottomTabBarItem href="#home" icon={<House />} isCurrent>
          Home
        </BottomTabBarItem>
        <BottomTabBarItem href="#transactions" icon={<ArrowLeftRight />}>
          Transactions
        </BottomTabBarItem>
        <BottomTabBarItem href="#goals" icon={<Target />}>
          Goals
        </BottomTabBarItem>
        <SheetTrigger>
          <BottomTabBarItem icon={<Ellipsis />}>More</BottomTabBarItem>
          <Sheet title="More" isTitleHidden>
            <nav aria-label="More pages">
              <ul style={{ display: 'grid', gap: 12, margin: 0, padding: 0, listStyle: 'none' }}>
                {PAGES.map((page) => (
                  <li key={page}>
                    <Link href={`#${page.toLowerCase()}`}>{page}</Link>
                  </li>
                ))}
              </ul>
            </nav>
          </Sheet>
        </SheetTrigger>
      </BottomTabBar>
    </div>
  );
}

Capacity

Use four short labels, or five at most, each under about 60px at 375px. Each label gets (width - 8) / n - 8 pixels:

• Four tabs: 83.8px at 375px, 70px at 320px.
• Five tabs: 65px at 375px, 54px at 320px.

"Transactions" is 77.3px, so it fits four tabs from 350px and ellipsizes at 320px. On a phone, the frame around these examples is narrower than the screen, so it may ellipsize here but fit in your app. The label is one line, with an ellipsis as a last resort, and the accessible name always holds the whole label.

Label widths in Sofia Sans at 14px and weight 500: Transactions 77.3px, Documents 70.4, Accounts 57.5, Settings 50.9, Insights 48.4, Home 35.9, Goals 33.5 and More 30.6. So Home, Transactions, Goals and More fit at 375px.

The safe area

The bar pads the safe area under and beside its items, through env(safe-area-inset-bottom) and its left and right twins. On iOS these are 0 unless the page covers the whole screen. In Next.js:

// app/layout.tsx
import type { Viewport } from 'next';

export const viewport: Viewport = { viewportFit: 'cover' };

Usage

CSS alone hides the bar from 1024px up, so it can stay in the page at every width.

• App shell: pass it as bottomBar. Below 1024px, the page keeps the bar's 64px and the safe area clear under its end.
• Routing: links navigate through React Aria's RouterProvider, which Routing sets up once. render hands an item's anchor to your own link component.
• Item count: the bar warns once in the console with fewer than three items or more than five, and still draws them.

Props

className and ref go on the nav and on each item's link or button, with className merged after the library's class. An item with href takes a link's props, and one without takes a button's.

Accessibility

The bar is a <nav> named by its aria-label, holding plain links and buttons in tab order. It has no tab roles: these are pages, and "tab bar" is only its name in prose.

• The page shown carries aria-current="page".
• Icons are hidden from assistive technology. A count's number and words are in the name.
• A button in a SheetTrigger reports whether its sheet is open.
• From 1024px up the bar is display: none, so it leaves the accessibility tree, and a rail's nav and the bar's never both appear.

Design rules

What keeps the bar in the system.