Skip to content
UI Kit
Accent color

Sub navigation

Navigation inside a page and on phones. Section bars with scroll spy, tables of contents and bottom tab bars.

2 components · 10 variants
Switch category

bottom-nav

Bottom nav

The tab bar at the bottom of a phone screen for web apps and mobile sites. Full width on phones, a centered floating bar on tablets, out of the way on desktops. A light glides to the active tab, badges count, a main button opens quick actions and More opens a sheet.

Props and details · Bottom nav

With labels

Five tabs with icons and labels. A soft light glides behind the active icon, the icon pops on a tap, counts and dots mark news.

Open in Studio

Center action

A raised main button between the tabs. It turns into a close button and lets three quick actions rise above a soft scrim.

Open in Studio

Floating

A glass pill that floats above full bleed pictures. A lens glides to the active tab, the content shows through the blur.

Open in Studio

Hide on scroll

A slim bar with icons and a dot under the active one. It slides away while you read down and returns as soon as you scroll up. Scroll the phone to try it.

Open in Studio

With More sheet

Four tabs and More. More opens a sheet from the bar with every other place, the light moves to More while it is open. Escape and the scrim close it.

Open in Studio

sticky-subnav

Sticky subnav

Navigation inside one long page. It knows which section you read, jumps there on a click and stays in reach. Pills, a product bar, a table of contents, chapter segments and edge dots, each with its own phone layout.

Props and details · Sticky subnav

Pills

A row of pills under the page head that sticks to the top. The light glides to the section you read, on phones the row follows it sideways.

Open in Studio

Product bar

Name and price on the left, links with a gliding underline, the main action on the right. Once the first section passes, the action fills.

Open in Studio

Table of contents

A column beside the text with a rail that fills as you read and a mark on the current part. Below 1024 px it turns into a bar at the top that opens the list.

Open in Studio

Chapters

One bar of segments, each fills while you read its chapter. Numbers and names on larger screens, on phones the current chapter and its place.

Open in Studio

Edge dots

Dots at the right edge for one-pagers, a label slides out on hover and focus. Phones get a chip at the bottom with the section name and arrows.

Open in Studio

Similar components

More from Layout, the same area of the kit.

Often combined with

Sections that usually sit next to Sub navigation on a page.

Often searched

Jump to

Copied to the clipboard