Navbar

The bar across the top of a site or app, with the brand, main links and one call to action. On small screens the links collapse into a menu.

Orvain UI

import { Navbar } from '@orvain/react';
 
<Navbar
  variant="v1"
  brandName="Orvain"
  logoHref="/"
  aria-label="Main"
  items={[
    { label: 'Home', href: '/', current: true },
    { label: 'Pricing', href: '/pricing' },
    {
      label: 'Resources',
      menu: [
        { label: 'Docs', href: '/docs' },
        { label: 'Changelog', href: '/changelog' },
      ],
    },
  ]}
  actions={[
    { label: 'Log in', variant: 'tertiary', href: '/login' },
    { label: 'Sign up', variant: 'primary', href: '/signup' },
  ]}
/>

Add an Orvain Navbar for “Northwind” with the links “Product” (current), “Pricing”, “Docs” and “Blog”, and a “Get started” button on the right.

Orvain MCPIncluded with the library

When to use#

At the top of every page of a marketing site, or a product with a few top-level sections.
For up to five or six main destinations. For more, group them or use a sidebar.

When not to use

Use a Tab Menu Horizontal to move between sections within one page.
Use a sidebar with a Tab Menu Vertical style list for products with deep navigation.

Anatomy#

1Bar

Full width, white, with a hairline along the bottom.

2Brand

Logo mark and name, linking to the home page.

3Links

The main destinations. The current one uses primary text on a soft surface.

4Call to action

One button at the end, such as Get started.

5Menu button

Replaces the links on small screens. Opens a panel below the bar.

6Menu panel

The links stacked full width, with the call to action at the bottom.

States#

Desktop

Brand, links and call to action in one row.

Mobile closed

Brand and menu button only.

Mobile open

The panel opens below the bar. The menu icon becomes a close icon.

Current link

Marked with a surface and aria-current.

Hover and focus

Links darken on hover. A ring shows on focus.

Source#

The Navbar is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

navbars