SubNav
A sticky bar of links to the sections of a long page, under the nav bar, marking the section the reader is in.
import { SubNav } from "@butteryui/react";Demo
Overview
Our house blend, roasted dark for espresso and milk, $14 a bag.
Taste
Cocoa, toasted hazelnut and brown sugar, low in acidity.
Beans
Cerrado from Brazil and Huila from Colombia, blended after roasting.
Brewing
18 grams for a double shot, or 30 grams in a French press.
Delivery
Roasted on Monday and at your door by Thursday.
When to use it
Use it for
- A long product or docs page with a handful of sections
- Jumping between the parts of one page without leaving it
Not for
- Moving between pages: use NavBar
- A list of contents beside an article: put it in ArticleLayout's aside
Examples
Chosen section
A sub nav told which section is current, such as by the app's router, rather than following the scroll.
Monday
Guji and Nyeri, roasted light for the week's subscriptions.
Tuesday
Huila and Huehuetenango, roasted medium.
Wednesday
Halfmoon House, roasted dark for the cafés' Friday orders.
Thursday
Cerrado, and small batches of next month's coffees.
Friday
No roasting: the roaster gets its weekly clean.
Help center
A help page whose sub nav follows the reader down and jumps to a topic when its link is pressed.
Brewing at home
Start with 15 grams of coffee to 250 of water, then adjust to taste.
Subscriptions
Pause, skip a bag or change your coffee any time before it's roasted.
Shipping
Bags ship the day after they're roasted, free on orders over $40.
Product page
A long product page: its title at the bar's start, a link to each section, and its call to action at the end.
Overview
Our house blend, roasted dark for espresso and milk, $14 a bag.
Taste
Cocoa, toasted hazelnut and brown sugar, low in acidity.
Beans
Cerrado from Brazil and Huila from Colombia, blended after roasting.
Brewing
18 grams for a double shot, or 30 grams in a French press.
Delivery
Roasted on Monday and at your door by Thursday.
Variants and states
A product page
48px tall under the nav bar. Scroll the page and the underline follows the section you're in on spring.snappy; press a link to jump there. Narrow the page and the links fold into a menu.
Props
SubNav
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | readonly SubNavItem[] | The sections, in page order. | |
title | ReactNode | What the page is about, at the start of the bar, such as the product's name. | |
action | ReactNode | Something at the end of the bar, such as a small call to action. | |
current | string | null | The section to mark as current, by id. Leave it out and the bar follows the reader down the page, marking the section under the sticky bars. | |
label | string | "Sections" | Names the navigation for screen readers. Defaults to "Sections". |
moreLabel | string | "More sections" | Names the button that lists the sections that don't fit. Defaults to "More sections". |
It also takes Omit<ComponentPropsWithRef<"nav">, "title">.
SubNavItem
One section a `SubNav` links to.
| Field | Type | Default | Description |
|---|---|---|---|
idrequired | string | The id of the section's element on the page. | |
labelrequired | string | The link's text. |
Accessibility
A navigation landmark named "Sections" (label). The current section's link has aria-current="location". A link scrolls to its section and moves focus there, so Tab carries on from the section; links that don't fit move into a "More sections" menu.
| Keys | What they do |
|---|---|
| Enter | Scrolls to the focused link's section and moves focus there, without changing the URL |
| Enter, Space or Down | Opens the More sections menu from its button, where Up and Down move, Enter jumps to a section and Escape closes |
Motion
Its selection indicator slides to the chosen option on `spring.snappy`, inside one track.
With reduced motion: The underline lands on the current section's link at once instead of sliding.
Layout
It runs the width of its scroll area, sticky at the top under any bars above it, its content on the page container and --bt-h-sub-nav (48px) tall. The title sits at the start, truncating and shown in full on hover, the links after it at the end (at the start with no title) and the action last; each link runs the bar's full height as its hit area, and links that don't fit fold into the More sections menu instead of wrapping.
Related
See it in the Halfmoon shop demo.