Navbar | Components | Neighborhood Design System

Example

Selected Brand

Loading

Code

HTML

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

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

React

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`	`standard \| contained \| fullwidth`	`standard`	Set the navbar layout mode.
`alignment`	`alignment`	`start \| center \| end`	`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 on smaller mobile screen sizes.
`ariaLabel`	`aria-label`	`string`	`Navigation`	ARIA label for the navigation landmark. Not visually displayed.
`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.
`surface`	`surface`	`none \| primary \| secondary \| inverse \| inverse-secondary`	`primary`	Surface theme applied to the navbar background.
`marginTop`	`margin-top`	`none \| small \| medium \| large`	`none`	Adjust margin above the component.
`marginBottom`	`margin-bottom`	`none \| small \| medium \| large`	`none`	Adjust margin below the component.
`paddingTop`	`padding-top`	`default \| none \| small \| medium \| large`	`default`	Adjust padding above the component.
`paddingBottom`	`padding-bottom`	`default \| none \| small \| medium \| large`	`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.

Dependencies

This component contains the following components as dependencies.

Navbar ready