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 */
}

CSS Properties

Set these on nbhd-navbar or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.

Property	Token	Value
`--nbhd-navbar-alignment`	—	`center`
`--nbhd-navbar-borderColor`	`--nbhd-context-color-accent-primary`	Adapts to surface
`--nbhd-navbar-borderStyle`	—	`solid`
`--nbhd-navbar-borderWidth`	`--nbhd-border-width-none`	`0`
`--nbhd-navbar-boxShadow`	`--nbhd-shadow-none`	`none`
`--nbhd-navbar-content-bpMd-gridColumn`	—	`2/3`
`--nbhd-navbar-content-bpMd-gridRow`	—	`1/2`
`--nbhd-navbar-content-gridColumn`	—	`1/3`
`--nbhd-navbar-content-gridRow`	—	`2/3`
`--nbhd-navbar-ctaWrapper-bpLg-gridColumn`	—	`3/4`
`--nbhd-navbar-ctaWrapper-bpLg-gridRow`	—	`1/2`
`--nbhd-navbar-ctaWrapper-bpMd-gridColumn`	—	`1/3`
`--nbhd-navbar-ctaWrapper-bpMd-gridRow`	—	`2/3`
`--nbhd-navbar-ctaWrapper-gridColumn`	—	`2/3`
`--nbhd-navbar-ctaWrapper-gridRow`	—	`1/2`
`--nbhd-navbar-ctaWrapper-justifySelf`	—	`end`
`--nbhd-navbar-display`	—	`block`
`--nbhd-navbar-grid-alignItems`	—	`center`
`--nbhd-navbar-grid-bpLg-gridTemplateColumns`	—	`max-content auto max-content`
`--nbhd-navbar-grid-bpMd-gridTemplateColumns`	—	`max-content 1fr`
`--nbhd-navbar-grid-display`	—	`grid`
`--nbhd-navbar-grid-gap`	`--nbhd-space-2`	`8px`
`--nbhd-navbar-grid-gridTemplateColumns`	—	`1fr 1fr`
`--nbhd-navbar-host-display`	—	`block`
`--nbhd-navbar-host-insetBlockStart`	—	`auto`
`--nbhd-navbar-host-position`	—	`static`
`--nbhd-navbar-host-zIndex`	`--nbhd-z-auto`	`auto`
`--nbhd-navbar-linksGroup-bpMd-gridColumn`	—	`2/3`
`--nbhd-navbar-linksGroup-bpMd-gridRow`	—	`1/2`
`--nbhd-navbar-linksGroup-display`	—	`flex`
`--nbhd-navbar-linksGroup-flexWrap`	—	`wrap`
`--nbhd-navbar-linksGroup-gap`	`--nbhd-space-2`	`8px`
`--nbhd-navbar-linksGroup-gridColumn`	—	`1/3`
`--nbhd-navbar-linksGroup-gridRow`	—	`2/2`
`--nbhd-navbar-linksGroup-marginBlock`	`--nbhd-space-0`	`0px`
`--nbhd-navbar-linksGroup-marginInline`	`--nbhd-space-0`	`0px`
`--nbhd-navbar-linksGroup-paddingBlock`	`--nbhd-space-0`	`0px`
`--nbhd-navbar-linksGroup-paddingInline`	`--nbhd-space-0`	`0px`
`--nbhd-navbar-logoGroup-alignItems`	—	`center`
`--nbhd-navbar-logoGroup-display`	—	`flex`
`--nbhd-navbar-logoGroup-gap`	`--nbhd-space-5`	`20px`
`--nbhd-navbar-logoGroup-gridColumn`	—	`1/2`
`--nbhd-navbar-logoGroup-gridRow`	—	`1/2`
`--nbhd-navbar-logoGroup-justifyContent`	—	`space-between`
`--nbhd-navbar-logoGroup-maxInlineSize`	—	`200px`
`--nbhd-navbar-logoGroup-multiple-maxInlineSize`	—	`300px`
`--nbhd-navbar-logoGroup-position`	—	`relative`
`--nbhd-navbar-logoGroup-separator-backgroundColor`	`--nbhd-context-color-accent-primary`	Adapts to surface
`--nbhd-navbar-logoGroup-separator-blockSize`	—	`100%`
`--nbhd-navbar-logoGroup-separator-inlineSize`	`--nbhd-border-width-subtle`	`1px`
`--nbhd-navbar-logoGroup-separator-insetBlockStart`	—	`0`
`--nbhd-navbar-logoGroup-separator-insetInlineStart`	—	`50%`
`--nbhd-navbar-logoGroup-separator-position`	—	`absolute`
`--nbhd-navbar-logoGroup-separator-transform`	—	`translateX(-50%)`
`--nbhd-navbar-marginInline`	`--nbhd-space-0`	`0px`
`--nbhd-navbar-maxInlineSize`	—	`100%`
`--nbhd-navbar-paddingBlock`	`--nbhd-space-4`	`16px`
`--nbhd-navbar-paddingInline`	`--nbhd-space-0`	`0px`
`--nbhd-navbar-position`	—	`static`
`--nbhd-navbar-shadow-boxShadow`	`--nbhd-shadow-sm`	`-4px 2px 16px 3px rgb(from #000000 r g b / 0.15)`
`--nbhd-navbar-title-gridColumn`	—	`1/2`
`--nbhd-navbar-title-gridRow`	—	`1/2`

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>