Navigation Bar
ready
A component to contextual navigation to a page or section.
Loading
Code
HTML
import { NbhdNavigationBar } from '@fbin-web/neighborhood-core';<nbhd-navigation-bar aria-label="Navigation bar">
<nbhd-text slot="title" tag="div">
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="nav" href="nav-link-1">
Vehicula
</nbhd-link>
<nbhd-link slot="nav" href="nav-link-2">
Consectetur
</nbhd-link>
</nbhd-navigation-bar>React
import { NbhdNavigationBar, NbhdCta, NbhdText, NbhdLink } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdNavigationBar aria-label="Navigation bar">
<NbhdText
slot="title"
tag="div">
Dolor Tellus Etiam
</NbhdText>
<NbhdCta
slot="cta"
variant="primary"
href="fun-cta-slide-1"
aria-label="Learn more about CTA 1">
Nibh Fusce
</NbhdCta>
<NbhdLink
slot="nav"
href="nav-link-1">
Vehicula
</NbhdLink>
<NbhdLink
slot="nav"
href="nav-link-2">
Consectetur
</NbhdLink>
</NbhdNavigationBar>
</>
);Image Dimensions
Recommended logo dimensions for optimal display across different screen sizes and configurations.
| Scenario | Mobile (max 145px) | Desktop (max 195px) | Recommended Ratio |
|---|---|---|---|
| Single logo | 145px wide | 195px wide | 2.4:1 aspect ratio (195px × 80px) |
| Two logos | 62px wide each | 87px wide each | 2.2:1 aspect ratio (90px × 40px each) |
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
data
Deprecated
|
NavigationBarData
|
Content for component. | ||
nav
Deprecated
|
CTA[]
|
Navigation anchor content. | ||
ariaLabel
|
aria-label
|
string
|
Navigation Bar
|
ARIA label description for navigation bar. Not visually displayed. |
compact
|
compact
|
boolean
|
false
|
Set the component max-inline-size to --nbhd-maxInlineSize
|
shadow
|
shadow
|
boolean
|
false
|
Add shadow to component. |
border
|
border
|
boolean
|
false
|
Add border to component. |
sticky
|
sticky
|
boolean
|
false
|
Make the navigation bar sticky to the top of the parent container. |
logoAccent
|
logo-accent
|
boolean
|
false
|
Add accent divider between logos when there are two logos. |
hideOnMobile
|
hide-on-mobile
|
boolean
|
false
|
Hide the navigation bar entirely on mobile and smaller screen sizes |
fullWidth
|
full-width
|
boolean
|
false
|
Enable navigation bar to go full width of window and ignore container max-inline-size.
|
navAlignment
|
nav-alignment
|
left | center | right
|
center
|
Set the alignment for the navigation anchors. |
contentAlignment
|
content-alignment
|
left | center | right
|
center
|
Set the alignment for the content. |
background
|
background
|
none | primary-light | secondary-light | primary-dark | secondary-dark
|
none
|
Background theme color for main component. |
marginTop
|
margin-top
|
none | small | medium | large
|
none
|
Adjust margin above the component. none = 0 small = 24px medium = 48px large = 96px
|
marginBottom
|
margin-bottom
|
none | small | medium | large
|
none
|
Adjust margin below the component. none = 0 small = 24px medium = 48px large = 96px
|
paddingTop
|
padding-top
|
default | none | small | medium | large
|
default
|
Adjust padding to the top of the component. default = component's top padding none = 0 small = 24px medium = 48px large = 96px
|
paddingBottom
|
padding-bottom
|
default | none | small | medium | large
|
default
|
Adjust padding to the bottom of the component. default = component's bottom padding none = 0 small = 24px medium = 48px large = 96px
|
Data Structure
NavigationBarData interface properties passed to the data attribute. This is deprecated; the preferred method is using slots.
| Property | Type | Required | Description |
|---|---|---|---|
title
|
string
|
No | Main headline content |
content
|
string
|
No | Short descriptive content |
logoMain
|
Logo
|
No | Main logo object with src, alt, href, external, and other media properties |
logoSecondary
|
Logo
|
No | Secondary logo object with src, alt, href, external, and other media properties |
cta
|
CTA
|
No | Call to Action object with label, href, and optional properties |
Nav Structure
CTA interface properties for navigation items passed to the nav array. This is deprecated; the preferred method is using slots.
| Property | Type | Required | Description |
|---|---|---|---|
label
|
string
|
Yes | Text displayed for anchor. |
href
|
string
|
Yes | Hyperlink reference for anchor. |
ariaLabel
|
string
|
No | ARIA label for anchor accessibility. |
external
|
boolean
|
No | Open anchor in a new window. |
class
|
string
|
No | Additional CSS class for the anchor. |
Logo Structure
Logo interface properties extending Media interface for logoMain and logoSecondary objects.
| Property | Type | Required | Description |
|---|---|---|---|
src
|
string
|
Yes | Source URL for the logo image or video. |
alt
|
string
|
Yes | Alternative text for accessibility. |
type
|
image | video
|
Yes | Media type specification. |
href
|
string
|
No | Optional hyperlink URL when logo is clickable. |
external
|
boolean
|
No | Open link in a new window when href is provided. |
class
|
string
|
No | Additional CSS class for styling. |
crop
|
none | center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-left
|
No | Image crop position for responsive behavior. |
Slots
Named slots for custom content placement within the navigation bar component.
| Name | Description |
|---|---|
title
|
Custom content for the navigation bar title area. Falls back to data.title if not provided. |
content
|
Custom descriptive content below the title. Falls back to data.content if not provided. |
logo-main
|
Custom content for the primary logo area. Falls back to data.logoMain if not provided. |
logo-secondary
|
Custom content for the secondary logo area. Falls back to data.logoSecondary if not provided. |
nav
|
Custom navigation items content. Falls back to the nav array property if not provided. |
cta
|
Custom call-to-action button content. Falls back to data.cta if not provided. |
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 all content. |
grid
|
The grid layout container for component sections. |
nav-title
|
Container element for the title section. |
title
|
The title slot area for custom title content. |
nav-description
|
Container element for the description section. |
content
|
The content slot area for custom descriptive content. |
logo-container
|
Container element that wraps both logo areas. |
logo-main
|
Container for the main logo slot area. |
logo-secondary
|
Container for the secondary logo slot area. |
logo-main-anchor
|
Anchor element for the main logo when href is provided. |
logo-secondary-anchor
|
Anchor element for the secondary logo when href is provided. |
logo-main-image
|
Image element for the main logo. |
logo-secondary-image
|
Image element for the secondary logo. |
nav-container
|
Container element for navigation items. |
nav-items
|
Navigation slot area for custom navigation content. |
nav-link
|
Individual navigation link elements. |
nav-cta
|
Container for the call-to-action section. |
cta
|
The CTA slot area for custom call-to-action content. |
CSS Properties
CSS custom properties available for component customization and theming.
| Property | Default Value |
|---|---|
--nbhd-navigationBar-host-insetBlockStart
|
auto |
--nbhd-navigationBar-host-position
|
static |
--nbhd-navigationBar-host-zIndex
|
auto |
--nbhd-navigationBar-borderColor
|
var(--nbhd-color-gray) |
--nbhd-navigationBar-borderStyle
|
solid |
--nbhd-navigationBar-borderWidth
|
0 |
--nbhd-navigationBar-boxShadow
|
none |
--nbhd-navigationBar-display
|
block |
--nbhd-navigationBar-marginInline
|
var(--nbhd-space-0, 0) |
--nbhd-navigationBar-maxInlineSize
|
100% |
--nbhd-navigationBar-paddingBlock
|
var(--nbhd-space-4, 16px) |
--nbhd-navigationBar-paddingInline
|
var(--nbhd-space-0, 0) |
--nbhd-navigationBar-position
|
static |
--nbhd-navigationBar-grid-alignItems
|
center |
--nbhd-navigationBar-grid-columnGap
|
0.5rem |
--nbhd-navigationBar-grid-display
|
grid |
--nbhd-navigationBar-grid-gridTemplateColumns
|
1fr 1fr |
--nbhd-navigationBar-grid-rowGap
|
0.5rem |
--nbhd-navigationBar-title-color
|
inherit |
--nbhd-navigationBar-title-fontSize
|
var(--nbhd-fontSize-lg) |
--nbhd-navigationBar-title-gridColumn
|
1/2 |
--nbhd-navigationBar-title-gridRow
|
1/2 |
--nbhd-navigationBar-description-color
|
inherit |
--nbhd-navigationBar-description-fontSize
|
var(--nbhd-fontSize-md) |
--nbhd-navigationBar-description-fontWeight
|
var(--nbhd-fontWeight-400) |
--nbhd-navigationBar-description-gridColumn
|
1/3 |
--nbhd-navigationBar-description-gridRow
|
2/3 |
--nbhd-navigationBar-description-justifySelf
|
center |
--nbhd-navigationBar-logoContainer-alignItems
|
normal |
--nbhd-navigationBar-logoContainer-columnGap
|
normal |
--nbhd-navigationBar-logoContainer-display
|
block |
--nbhd-navigationBar-logoContainer-gridColumn
|
1/2 |
--nbhd-navigationBar-logoContainer-gridRow
|
1/2 |
--nbhd-navigationBar-logoContainer-gridTemplateColumns
|
none |
--nbhd-navigationBar-logoContainer-justifyContent
|
normal |
--nbhd-navigationBar-logoContainer-maxInlineSize
|
200px |
--nbhd-navigationBar-logoContainer-position
|
relative |
--nbhd-navigationBar-logoAccent-backgroundColor
|
var(--nbhd-accent) |
--nbhd-navigationBar-logoAccent-blockSize
|
100% |
--nbhd-navigationBar-logoAccent-content
|
'' |
--nbhd-navigationBar-logoAccent-inlineSize
|
1px |
--nbhd-navigationBar-logoAccent-insetBlockStart
|
0 |
--nbhd-navigationBar-logoAccent-insetInlineStart
|
50% |
--nbhd-navigationBar-logoAccent-position
|
absolute |
--nbhd-navigationBar-logoAccent-transform
|
translateX(-50%) |
--nbhd-navigationBar-nav-display
|
flex |
--nbhd-navigationBar-nav-flexWrap
|
wrap |
--nbhd-navigationBar-nav-gridColumn
|
1/3 |
--nbhd-navigationBar-nav-justifySelf
|
center |
--nbhd-navigationBar-nav-marginBlock
|
0 |
--nbhd-navigationBar-nav-marginInline
|
0 |
--nbhd-navigationBar-nav-paddingBlock
|
0 |
--nbhd-navigationBar-nav-paddingInline
|
0 |
--nbhd-navigationBar-cta-gridColumn
|
2/3 |
--nbhd-navigationBar-cta-gridRow
|
1/2 |
--nbhd-navigationBar-cta-justifySelf
|
end |