Bottom Tab Bar

#Installation & usage

Use it for the three to five top-level destinations of a phone layout: the places people switch between all day, within reach of the thumb. Each tab goes to a page, so the tabs are links. To switch panels of content inside one page, use Tabs. On wide screens the same destinations belong in an App Header or a Sidebar, so render the bar only below your phone breakpoint.

import { BottomTabBar, BottomTabBarItem } from '@youj/react'
import { HomeIcon, InboxIcon, SearchIcon, UserIcon } from '@youj/icons'

export function PhoneNav({ pathname }: { pathname: string }) {
  return (
    <BottomTabBar className="md:hidden">
      <BottomTabBarItem href="/" icon={<HomeIcon />} label="Home" active={pathname === '/'} />
      <BottomTabBarItem href="/search" icon={<SearchIcon />} label="Search" active={pathname === '/search'} />
      <BottomTabBarItem href="/inbox" icon={<InboxIcon />} label="Inbox" badge={3} active={pathname === '/inbox'} />
      <BottomTabBarItem href="/me" icon={<UserIcon />} label="Profile" active={pathname === '/me'} />
    </BottomTabBar>
  )
}

The bar is fixed to the bottom of the viewport and pads itself by the safe-area insets, so it clears the home indicator and the rounded corners on its own. For that to work, the page needs viewport-fit=cover in its viewport meta tag. Give the page's content bottom padding as tall as the bar, so nothing ends up hidden behind it. The previews pass className="absolute" to place it inside a phone frame instead.

Each BottomTabBarItem renders an <a>. Pass render for a router's link, for example render={<Link href="/inbox" />}. Mark the current destination with active: its icon sits on a pill, which glides from tab to tab on the smooth spring, and its icon and label turn to ink.

#Description

#Code