SiteNavbar

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Button } from '@nizivo/react/button';
import { Link } from '@nizivo/react/unstable/link';
import { SiteNavbar } from '@nizivo/react/unstable/site-navbar';

const LINKS = [
  { label: 'Product', href: '/product/' },
  { label: 'Components', href: '/docs/components/', current: true },
  { label: 'Docs', href: '/docs/' },
  { label: 'Pricing', href: '/pricing/' },
];

export function SiteNavbarExample(): JSX.Element {
  return (
    <div style={{ display: 'grid', gap: 24, inlineSize: 960 }}>
      <SiteNavbar
        brand={<Link href="/">Nizivo</Link>}
        links={LINKS}
        actions={
          <>
            <Button variant="tertiary">Sign in</Button>
            <Button variant="primary">Get started</Button>
          </>
        }
      />
      <SiteNavbar
        variant="floating"
        brand={<Link href="/">Nizivo</Link>}
        links={LINKS}
        actions={<Button variant="primary">Get started</Button>}
      />
    </div>
  );
}

ImportCopy Anchor Link

import { SiteNavbar } from '@nizivo/react/unstable/site-navbar';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/site-navbar.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript: the narrow menu is a native <details> disclosure. How to choose.

UseCopy Anchor Link

It is a <header> holding a <nav> named "Main". links (a label, an href, and current for the page you are on, which gets aria-current="page") sit between brand and actions. variant is bar, full width with a rule under it, or floating, a glass pill for over a hero. Below 768 px the links move into a menu button named "Menu" whose panel opens under the bar.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

SiteNavbarLabels type

import type { SiteNavbarLabels } from '@nizivo/react/unstable/site-navbar'

SiteNavbar's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
labelrequired	string	'Main'	The nav's name.
menurequired	string	'Menu'	The menu button's name, below 768 px.

SiteNavbarLink type

import type { SiteNavbarLink } from '@nizivo/react/unstable/site-navbar'

One link.

Name	Type	Default	Description
current	boolean	–	The page this link goes to is the current one.
hrefrequired	string	–
labelrequired	ReactNode	–

SiteNavbarProps type

import type { SiteNavbarProps } from '@nizivo/react/unstable/site-navbar'

The props of SiteNavbar, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-site-navbar, .nz-site-navbar-actions, .nz-site-navbar-brand, .nz-site-navbar-link, .nz-site-navbar-links, .nz-site-navbar-menu, .nz-site-navbar-narrow, .nz-site-navbar-panel, .nz-site-navbar-wide.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• site-navbar-link: draws the focus outline itself on keyboard focus.
• site-navbar-menu: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

To be written.