Navigation Bar
draft
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"
theme="light">
Dolor Tellus Etiam
</nbhd-text>
<nbhd-cta
slot="cta"
variant="primary"
href="fun-cta-slide-1"
aria-label="Learn more about CTA 1"
theme="light">
Nibh Fusce
</nbhd-cta>
<nbhd-link
slot="nav"
href="nav-link-1"
theme="light">
Vehicula
</nbhd-link>
<nbhd-link
slot="nav"
href="nav-link-2"
theme="light">
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"
theme="light">
Dolor Tellus Etiam
</NbhdText>
<NbhdCta
slot="cta"
variant="primary"
href="fun-cta-slide-1"
aria-label="Learn more about CTA 1"
theme="light">
Nibh Fusce
</NbhdCta>
<NbhdLink
slot="nav"
href="nav-link-1"
theme="light">
Vehicula
</NbhdLink>
<NbhdLink
slot="nav"
href="nav-link-2"
theme="light">
Consectetur
</NbhdLink>
</NbhdNavigationBar>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
data
|
object
|
Content for component. | ||
nav
|
array
|
Navigation anchor content. | ||
prefab
|
prefab
|
boolean
|
false
|
When enabled the component will use the data and nav properties for content and not the slots.
|
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. |
theme
|
theme
|
primary-light | secondary-light | primary-dark | secondary-dark
|
primary-light
|
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 Properties
Data object property is only when the prefab property is enabled.
| Property | Type | Description |
|---|---|---|
title
|
string
|
Main headline content |
ariaLabel
Required
|
string
|
ARIA label description for navigation bar. Not visually displayed. |
description
|
string
|
Short descriptive content to be add |
logoMain
|
object
|
Logo media data object with additional href field. |
logoSecondary
|
object
|
Logo media data object with additional href field. |
cta
|
object
|
Call to Action data object. |
Nav Properties
Nav object property is only when the prefab property is enabled.
| Property | Type | Description |
|---|---|---|
label
Required
|
string
|
Text displayed for anchor. |
href
Required
|
string
|
Hyperlink reference for anchor. |
ariaLabel
|
string
|
ARIA Label for anchor. |
external
|
boolean
|
Open anchor in a new window. |
Slots
Slots are not available when the prefab property is enabled.
| Name | Description |
|---|---|
| title | Title placement. |
| content | Content placement. |
| logo-main | Main logo placement. |
| logo-secondary | Secondary logo placement. |
| cta | Call to Action placement. |
| nav | Navigation anchor placement. |
CSS Parts
| Name | Description |
|---|---|
base
|
The main component wrapper element. |
container
|
The main component container element. |
grid
|
The flex container that wraps visual and detail. |
logo-container
|
The logo container that wraps logo elements. |
logo-main
|
Container for main logo. |
logo-main-anchor
|
Anchor element for main logo. |
logo-main-image
|
Image element for main logo. |
logo-secondary
|
Container for secondary logo. |
logo-secondary-anchor
|
Anchor element for secondary logo. |
logo-secondary-image
|
Image element for secondary logo. |
nav-container
|
Container for navigation anchors. |
nav-anchor
|
Anchor elements within navigation container. |
cta-container
|
Container for CTA element. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-navigationBar-host-insetBlockStart
|
auto |
--nbhd-navigationBar-host-position
|
static |
--nbhd-navigationBar-host-zIndex
|
auto |
--nbhd-navigationBar-borderColor
|
var(--nbhd-navigationBar-borderColor-lightTheme) |
--nbhd-navigationBar-borderStyle
|
solid |
--nbhd-navigationBar-borderWidth
|
0 |
--nbhd-navigationBar-boxShadow
|
none |
--nbhd-navigationBar-display
|
block |
--nbhd-navigationBar-marginInline
|
var(--nbhd-space-0) |
--nbhd-navigationBar-maxInlineSize
|
100% |
--nbhd-navigationBar-paddingBlock
|
var(--nbhd-space-4) |
--nbhd-navigationBar-paddingInline
|
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-fontWeight
|
var(--nbhd-fontWeight-700) |
--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-lightTheme-accent) |
--nbhd-navigationBar-logoAccent-blockSize
|
100% |
--nbhd-navigationBar-logoAccent-content
|
''' |
--nbhd-navigationBar-logoAccent
|
block |
--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 |