Navbar

Ready

in progress...

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

import { NbhdNavbar } from '@fbin-web/neighborhood-core';

Usage

<nbhd-navbar>
  <nbhd-text slot="title" variant="subtitle" tag="h3">
    Dolor Tellus Etiam
  </nbhd-text>
  <nbhd-cta slot="cta" variant="primary" href="fun-cta-slide-1" aria-label="Learn more about CTA 1">
    Nibh Fusce
  </nbhd-cta>
  <nbhd-link slot="links" href="nav-link-1">
    Vehicula
  </nbhd-link>
  <nbhd-link slot="links" href="nav-link-2">
    Consectetur
  </nbhd-link>
</nbhd-navbar>

Install

npm install @fbin-web/neighborhood-react

Import

import { NbhdNavbar } from '@fbin-web/neighborhood-react';

Usage

import { NbhdNavbar, NbhdText, NbhdCta, NbhdLink } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdNavbar>
      <NbhdText
        slot="title"
        variant="subtitle"
        tag="h3">
        Dolor Tellus Etiam
      </NbhdText>
      <NbhdCta
        slot="cta"
        variant="primary"
        href="fun-cta-slide-1"
        ariaLabel="Learn more about CTA 1">
        Nibh Fusce
      </NbhdCta>
      <NbhdLink
        slot="links"
        href="nav-link-1">
        Vehicula
      </NbhdLink>
      <NbhdLink
        slot="links"
        href="nav-link-2">
        Consectetur
      </NbhdLink>
    </NbhdNavbar>
  </>
);

Properties

Property	Attribute	Type	Default	Description
`layout`	`layout`	`standardcontainedfullwidth`	`standard`	Set the navbar layout mode.
`alignment`	`alignment`	`startcenterend`	`center`	Horizontal alignment of the navbar content.
`logoSeparator`	`logo-separator`	`boolean`	`false`	Add a separator between the primary and secondary logos when both are present.
`mobileHidden`	`mobile-hidden`	`boolean`	`false`	Hide the navbar below 768px. Only use it when the page provides another way to reach the same navigation on small screens (e.g. a mobile menu), so nothing is lost at 320px (WCAG 1.4.10).
`ariaLabel`	`aria-label`	`string`	—	Names the nav landmark when a page has more than one, e.g. "Main". Leave out the word "navigation"; screen readers already announce it.
`shadow`	`shadow`	`boolean`	`false`	Add a shadow to the navbar.
`border`	`border`	`boolean`	`false`	Add a border around the navbar.
`sticky`	`sticky`	`boolean`	`false`	Keep the navbar pinned to the top of the container while scrolling. When sticky, set `scroll-padding-top` on the page to the navbar height so focused elements aren’t hidden behind it (WCAG 2.4.11).
`surface`	`surface`	`noneprimarysecondaryinverseinverse-secondary`	`primary`	Surface theme applied to the navbar background.
`marginTop`	`margin-top`	`nonesmallmediumlarge`	`none`	Adjust margin above the component.
`marginBottom`	`margin-bottom`	`nonesmallmediumlarge`	`none`	Adjust margin below the component.
`paddingTop`	`padding-top`	`defaultnonesmallmediumlarge`	`default`	Adjust padding above the component.
`paddingBottom`	`padding-bottom`	`defaultnonesmallmediumlarge`	`default`	Adjust padding below the component.

Slots

Named slots for custom content placement within the navigation bar component.

Name	Description
`title`	Custom content for the navbar title area. Rendered only when a title slot is provided and no logo is present.
`content`	Custom descriptive content rendered in the content area when no links slot is provided.
`logo-main`	Custom content for the primary logo area.
`logo-secondary`	Custom content for the secondary logo area.
`links`	Custom navigation links rendered in the links group.
`cta`	Custom call-to-action content rendered in the CTA area.

CSS Parts

Exposed CSS parts for styling specific elements within the navigation bar component.

Name	Description
`base`	The main navigation element wrapper.
`container`	The container element that wraps the navbar's grid.
`grid`	The grid layout container for the navbar sections.
`title`	The title block that wraps the title slot content.
`title-slot`	The slot element for title content.
`content`	The content block that wraps the content slot.
`content-slot`	The slot element for content text.
`logo-group`	The wrapper for the primary and secondary logo groups.
`logo-main`	The main logo block.
`logo-secondary`	The secondary logo block.
`links-group`	The wrapper for the links slot.
`links`	The slot element for custom nav links.
`cta-wrapper`	The wrapper for the CTA slot content.
`cta`	The slot element for CTA content.

nbhd-navbar::part(base) {
  /* your styles */
}

Dependencies

Child components <nbhd-navbar> renders internally. Import them too when you tree-shake.

TextReady <nbhd-text> CTAReady <nbhd-cta> ImageReady <nbhd-image> LinkReady <nbhd-link>