@contentful/f36-navbar v4.74.1

title: 'Navbar' type: 'component' status: 'alpha' slug: /components/navbar/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/navbar' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-navbar'

typescript: ./src/Navbar.tsx,./src/NavbarItem/NavbarItem.tsx,./src/NavbarMenuItem/NavbarMenuItem.tsx,./src/NavbarSwitcher/NavbarSwitcher.tsx,./src/NavbarSwitcherItem/NavbarSwitcherItem.tsx,./src/NavbarSearch/NavbarSearch.tsx,./src/NavbarHelp/NavbarHelp.tsx,./src/NavbarAccount/NavbarAccount.tsx,./src/NavbarBadge/NavbarBadge.tsx,./src/NavbarTopbarItem/NavbarTopbarItem.tsx

Navbar provides a consistent navigation experience across all of Contentful's products. It is composed of a top and bottom section. Where the bottom section is used for navigation items and the top section is used for additional context and actions.

Import

import { Navbar } from '@contentful/f36-navbar';

Props (API reference)

Navbar

Navbar.Item

Navbar.MenuItem

Navbar.TopbarItem

Navbar.Switcher

Navbar.SwitcherItem

Navbar.Search

Navbar.Help

Navbar.Account

Navbar.Badge

Content guidelines

At least one important thing to consider when writing copy for this component Optional: Things to avoid

Accessibility

What makes this component accessible