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.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