Home
Previous componentNext component

Floating nav

Open in fibo's Storybook

Floating nav is a pill of destinations that floats above the bottom of a phone screen. The current item stretches to show its name, and the bar can step out of the way while people read. It's the nav on this site when you open it on a phone.

Today
Golden section
Seed heads
Pixel rabbits
Floating navTap an item. The fill slides over and the item opens up to show its name.

Anatomy

A nav landmark holding a pill. Each item is a link or a button, with an icon, a label and, on the current one, the fill behind it.

The barIn the flow, with Explore current.

Variants and states

Today
Golden section
Seed heads
Pixel rabbits
Compact36px items and 16px icons, the size this site uses.
Today
Golden section
Seed heads
Pixel rabbits
Labels always shownEvery label under its icon, like a tab bar.

Usage

  • 01Use it for the three to five places people move between most on a phone. Everything else belongs in a menu.
  • 02Keep labels to one short word. The current label has to fit beside its icon on a 320px screen.
  • 03Turn on hideOnScroll for reading surfaces such as articles and docs. Leave it off where people switch places often.
  • 04Pad the bottom of the page by the bar's height, so the last content can scroll clear of it.
  • 05Hide it at desktop widths, where a sidebar or top bar already does the job.

With your router

Items with an href render as links. onValueChange hands over the click, so an app can call event.preventDefault() and route it itself.

SearchLinks route through the app's own router, so the page never reloads.
Tap an item. The page title follows without a reload.

Best practices

DoKeep it to a handful of places with one-word names.
Don'tDon't fill it with every section. Past five, icons alone stop saying where they go.

Accessibility

Every item is a plain link or button in tab order, so the bar works from the keyboard without anything to learn.

KeyDoes
TabDoesMoves between the items
Space or ↵DoesGoes to the item's destination
  • 01The root is a nav landmark, named Main unless you pass aria-label. Name it when a page has more than one.
  • 02The current item carries aria-current="page". Hidden labels stay in the DOM, so every item keeps its name.
  • 03Tabbing into a hidden bar brings it back.
  • 04Every item is at least 44px square, or 36px with size="sm", well above the 24px minimum target.
  • 05With reduced motion, the indicator and the bar move without animating.

References