Menu bars and switchers

Menu bars with keyboard support, floating actions that follow the scroll and language switchers for every layout.

3 components · 14 variants

Switch category

Floating actions

Back to top, reading progress, a mobile action bar, a sticky call to action and a contact dock. They follow the scroll of the page.

Back to top
Reading progress
Action bar
Sticky call to action
Contact dock

Props and details

Back to top

Appears after the first screen. The ring fills with the page, hover shows the percent read.

Installv1.0.0

aiw add @ai-website/floating-actions

Brings along utils, kit, button, icon

Usage

<FloatingActions variant="back-to-top" threshold={400} showPercent />

Source

Reading progress

A thin line at the top fills while you read, a bar with the title and the minutes left slides in.

Open in Studio

Installv1.0.0

aiw add @ai-website/floating-actions

Brings along utils, kit, button, icon

Usage

<FloatingActions variant="reading-progress" title="…" minutes={6} />

Source

Action bar

Call, route and booking for a local business. A full-width bar on phones, a floating pill with the live status on larger screens. Hides while reading down.

Open in Studio

Installv1.0.0

aiw add @ai-website/floating-actions

Brings along utils, kit, button, icon

Usage

<FloatingActions variant="mobile-action-bar" status="…" actions={[{ icon, label, href, primary }]} />

Source

Sticky call to action

Slides in once the hero is gone. At the top on wide screens, at the bottom near the thumb on phones. Can be closed.

Open in Studio

Installv1.0.0

aiw add @ai-website/floating-actions

Brings along utils, kit, button, icon

Usage

<FloatingActions variant="sticky-cta" title="…" action={{ label, href }} dismissible />

Source

Contact dock

A labelled button that folds to its icon while reading and opens the ways to reach you, one after another. Escape closes it.

Open in Studio

Installv1.0.0

aiw add @ai-website/floating-actions

Brings along utils, kit, button, icon

Usage

<FloatingActions variant="contact-dock" label="…" heading="…" actions={[{ icon, label, detail, href }]} />

Source

language-switcher

Language switcher

Language and region choice with a real link per language. Languages by their own name, never by a flag.

Dropdown
Segmented
Footer list
Suggestion banner
Region picker

Props and details

Dropdown

A quiet button in the header. The menu shows each language in its own name and in the page language, arrow keys move through it.

Open in Studio

Installv1.0.0

aiw add @ai-website/language-switcher

Brings along utils, kit, button, icon, motion

Usage

<LanguageSwitcher variant="dropdown" value="en" languages={[{ code, label, english, href }]} />

Source

Segmented

Two or three short codes, a marker glides to the chosen one. For sites with few languages.

Installv1.0.0

aiw add @ai-website/language-switcher

Brings along utils, kit, button, icon, motion

Usage

<LanguageSwitcher variant="segmented" value="de" languages={[…]} />

Source

Footer list

Every language as a link in the last row of the footer. The line under the current one draws in on hover.

Open in Studio

Installv1.0.0

aiw add @ai-website/language-switcher

Brings along utils, kit, button, icon, motion

Usage

<LanguageSwitcher variant="inline-list" value="en" languages={[…]} />

Source

Suggestion banner

Offers the page in the visitor’s language, written in that language. Staying folds the banner away.

Open in Studio

Installv1.0.0

aiw add @ai-website/language-switcher

Brings along utils, kit, button, icon, motion

Usage

<LanguageSwitcher variant="suggestion-banner" languages={[…]} suggestion={{ code: "de", message, action, stay }} />

Source

Region picker

Regions as tabs, countries with their languages, a search that filters while you type.

Open in Studio

Installv1.0.0

aiw add @ai-website/language-switcher

Brings along utils, kit, button, icon, motion

Usage

<LanguageSwitcher variant="region-picker" title="…" regions={[{ id, title, countries }]} country="Germany" value="de-DE" />

Source

menubar

Menubar

Menus in a bar as in a desktop app. One tab stop, arrows walk the menus and step between them, checkbox and radio items keep their state.

Classic
Icons and labels
Floating bar
Vertical rail

Props and details

Classic

Text menus under a document title, with shortcuts, a view menu with checkboxes and zoom, and the last action in the status line. On phones the bar scrolls sideways.

Open in Studio

Installv1.0.0

aiw add @ai-website/menubar

Brings along utils, kit, icon, dropdown-menu, popover

Usage

<Menubar label="Document" menus={[{ id: "file", label: "File", items: [{ label: "New document", shortcut: "⌘N" }] }]} onAction={(menu, item) => run(item)} />

Source

Icons and labels

Menus with an icon above the label, as in office apps. The chart menu picks a kind, the format menu toggles bold and italic.

Open in Studio

Installv1.0.0

aiw add @ai-website/menubar

Brings along utils, kit, icon, dropdown-menu, popover

Usage

<Menubar variant="icons" label="Sheet" menus={[{ id: "insert", label: "Insert", icon: "plus-circle", items }]} />

Source

Floating bar

Icon menus on a canvas, the bar floats at the bottom and its menus open upward. Labels are read out and shown on hover.

Open in Studio

Installv1.0.0

aiw add @ai-website/menubar

Brings along utils, kit, icon, dropdown-menu, popover

Usage

<Menubar variant="floating" label="Canvas tools" menus={tools} />

Source

Vertical rail

The bar as a side rail. Up and Down walk the menus, Right opens one beside it, Left returns. On phones the rail shrinks to icons.

Open in Studio

Installv1.0.0

aiw add @ai-website/menubar

Brings along utils, kit, icon, dropdown-menu, popover

Usage

<Menubar variant="vertical" label="Site admin" menus={sections} />

Source

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Menu bars and switchers on a page.

On this page

Back to top

Reading progress

Action bar

Sticky call to action

Contact dock

Dropdown

Segmented

Footer list

Suggestion banner

Region picker

Classic

Icons and labels

Floating bar

Vertical rail

Similar components, Often combined with

Similar components

Often combined with