All components (204)

Top bar

Navigation · TopBar

What it is and when to use it

The application header: the brand on the left, the main navigation horizontally and the actions (notices, account) on the right. With skipTo it comes with the "Skip to content" link already in place.

When to use it

At the top of all the screens of a website or an application with few main sections: brand, links (with current on the current page) and actions.
skipTo with the id of the main content: whenever there is navigation before the content, which is almost always. skipText changes the text of the link.
sticky if the page is long and the actions need to stay at hand while scrolling.

When not to

For the menu of a management panel with many sections: SideNav.
For the header of a specific screen, with its title and its buttons: PageHeader.
For a notice that takes up the full width (maintenance, expired trial): GlobalAlert.

Keyboard: with skipTo, the first Tab shows "Skip to content"; Enter moves focus to the main content, not just the scroll. After that, Tab moves through the brand (if it is a link), the links and the actions.

Accessibility: it is a header (banner) with a nav inside, named "Main" or whatever navigationLabel says. The current page carries aria-current="page" and is marked with background and underline, not just color. The skip link lives out of view until it receives focus: it is not hidden with display: none, which would take it out of the Tab order.

Fine-tuning: CSS variables --amset-bar-sup-*: -background, -font, -gap, -padding-block, -padding-inline. The size moves the gap, the padding and the font size.

What it looks like

AMSET UI

Test bench

<TopBar
  brand="AMSET UI"
  links={[
    { key: 'componentes', label: 'Components', href: '/componentes/', current: true },
    { key: 'empezar', label: 'Start', href: '/empezar/' },
  ]}
  actions={<ButtonLink href="https://ui.amset.tech" size="sm" variant="outline">Test bench</ButtonLink>}
  skipTo="contenido"
/>

Props

Import it with import { TopBar } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`brand`required	`ReactNode`	The logo or the name. If it is a link, it should lead to the home page.
`actions`	`ReactNode`	What goes on the right: search, notices, account menu.
`className`	`string`	Merged with the library classes; it does not replace them.
`links`	`readonly BarLink[]`	—
`navigationLabel`	`string`	Name of the navigation, in case there is more than one on the page.
`size`	`"sm" \| "md" \| "lg"`	The gap, padding and font size of the bar.
`skipText`	`string`	—
`skipTo`	`string`	Id of the main content. It adds the skip link, which comes out of its gap when tabbing: without it, whoever uses the keyboard eats the whole navigation on every page before reaching what they came to read.
`sticky`	`boolean`	It stays attached to the top when scrolling.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: