Navigation Bar
A component to contextual navigation to a page or section.
Loading
Image Dimensions
| Description | Dimension |
|---|---|
| Single logo | 195px x 80px |
| Two logos | 90px x 40px |
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
data
Required
|
object
|
Content for component. | ||
nav
|
array
|
Navigation anchor content. | ||
compact
|
compact
|
boolean
|
false
|
Set the component max-inline-size to --neighborhood-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 content for navigation anchors. |
descAlignment
|
desc-alignment
|
left | center | right
|
center
|
Set the alignment content for description. |
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
Main data content for Navigation Bar.
Logo > Title
When a logo is provided the title content will not be displayed.
Nav > Description
When navigation anchors are provided the description will not display.
| 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
| 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. |
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. |
Navigation Bar Styling Properties
Available styling CSS Properties for the main Navigation Bar component.
| Property | Default Value |
|---|---|
--neighborhood-navigationBar-host-insetBlockStart
|
auto |
--neighborhood-navigationBar-host-position
|
static |
--neighborhood-navigationBar-host-zIndex
|
auto |
--neighborhood-navigationBar-borderColor
|
var(--neighborhood-navigationBar-borderColor-lightTheme) |
--neighborhood-navigationBar-borderStyle
|
solid |
--neighborhood-navigationBar-borderWidth
|
0 |
--neighborhood-navigationBar-boxShadow
|
none |
--neighborhood-navigationBar-display
|
block |
--neighborhood-navigationBar-marginInline
|
var(--neighborhood-space-0) |
--neighborhood-navigationBar-maxInlineSize
|
100% |
--neighborhood-navigationBar-paddingBlock
|
var(--neighborhood-space-4) |
--neighborhood-navigationBar-paddingInline
|
0 |
--neighborhood-navigationBar-position
|
static |
--neighborhood-navigationBar-grid-alignItems
|
center |
--neighborhood-navigationBar-grid-columnGap
|
0.5rem |
--neighborhood-navigationBar-grid-display
|
grid |
--neighborhood-navigationBar-grid-gridTemplateColumns
|
1fr 1fr |
--neighborhood-navigationBar-grid-rowGap
|
0.5rem |
--neighborhood-navigationBar-title-color
|
inherit |
--neighborhood-navigationBar-title-fontSize
|
var(--neighborhood-fontSize-lg) |
--neighborhood-navigationBar-title-fontWeight
|
var(--neighborhood-fontWeight-700) |
--neighborhood-navigationBar-title-gridColumn
|
1/2 |
--neighborhood-navigationBar-title-gridRow
|
1/2 |
--neighborhood-navigationBar-description-color
|
inherit |
--neighborhood-navigationBar-description-fontSize
|
var(--neighborhood-fontSize-md) |
--neighborhood-navigationBar-description-fontWeight
|
var(--neighborhood-fontWeight-400) |
--neighborhood-navigationBar-description-gridColumn
|
1/3 |
--neighborhood-navigationBar-description-gridRow
|
2/3 |
--neighborhood-navigationBar-description-justifySelf
|
center |
--neighborhood-navigationBar-logoContainer-alignItems
|
normal |
--neighborhood-navigationBar-logoContainer-columnGap
|
normal |
--neighborhood-navigationBar-logoContainer-display
|
block |
--neighborhood-navigationBar-logoContainer-gridColumn
|
1/2 |
--neighborhood-navigationBar-logoContainer-gridRow
|
1/2 |
--neighborhood-navigationBar-logoContainer-gridTemplateColumns
|
none |
--neighborhood-navigationBar-logoContainer-justifyContent
|
normal |
--neighborhood-navigationBar-logoContainer-maxInlineSize
|
200px |
--neighborhood-navigationBar-logoContainer-position
|
relative |
--neighborhood-navigationBar-logoAccent-backgroundColor
|
var(--neighborhood-lightTheme-accent) |
--neighborhood-navigationBar-logoAccent-blockSize
|
100% |
--neighborhood-navigationBar-logoAccent-content
|
''' |
--neighborhood-navigationBar-logoAccent
|
block |
--neighborhood-navigationBar-logoAccent-inlineSize
|
1px |
--neighborhood-navigationBar-logoAccent-insetBlockStart
|
0 |
--neighborhood-navigationBar-logoAccent-insetInlineStart
|
50% |
--neighborhood-navigationBar-logoAccent-position
|
absolute |
--neighborhood-navigationBar-logoAccent-transform
|
translateX(-50%) |
--neighborhood-navigationBar-nav-display
|
flex |
--neighborhood-navigationBar-nav-flexWrap
|
wrap |
--neighborhood-navigationBar-nav-gridColumn
|
1/3 |
--neighborhood-navigationBar-nav-justifySelf
|
center |
--neighborhood-navigationBar-nav-marginBlock
|
0 |
--neighborhood-navigationBar-nav-marginInline
|
0 |
--neighborhood-navigationBar-nav-paddingBlock
|
0 |
--neighborhood-navigationBar-nav-paddingInline
|
0 |
--neighborhood-navigationBar-cta-gridColumn
|
2/3 |
--neighborhood-navigationBar-cta-gridRow
|
1/2 |
--neighborhood-navigationBar-cta-justifySelf
|
end |
CTA Styling Properties
| Property | Default Value |
|---|---|
--neighborhood-cta-backgroundColor
|
transparent |
--neighborhood-cta-backgroundImage
|
none |
--neighborhood-cta-backgroundPosition
|
0 0 |
--neighborhood-cta-backgroundSize
|
100% |
--neighborhood-cta-borderColor
|
transparent |
--neighborhood-cta-borderRadius
|
2px |
--neighborhood-cta-borderStyle
|
solid |
--neighborhood-cta-borderWidth
|
2px |
--neighborhood-cta-color-lightTheme
|
var(--neighborhood-fbin-color-fbinNavy) |
--neighborhood-cta-color-darkTheme
|
var(--neighborhood-color-white) |
--neighborhood-cta-color-hover-lightTheme
|
var(--neighborhood-fbin-color-fbinNavy) |
--neighborhood-cta-color-hover-darkTheme
|
var(--neighborhood-color-white) |
--neighborhood-cta-cursor
|
pointer |
--neighborhood-cta-display
|
inline-block |
--neighborhood-cta-fontFamily
|
var(--neighborhood-link-fontStack) |
--neighborhood-cta-fontSize
|
var(--neighborhood-fontSize-xxs) |
--neighborhood-cta-fontStyle
|
normal |
--neighborhood-cta-fontWeight
|
var(--neighborhood-fontWeight-700) |
--neighborhood-cta-letterSpacing
|
var(--neighborhood-letterSpacing-2) |
--neighborhood-cta-paddingBlock
|
var(--neighborhood-space-3) |
--neighborhood-cta-paddingInline
|
var(--neighborhood-space-9) |
--neighborhood-cta-position
|
relative |
--neighborhood-cta-textAlign
|
center |
--neighborhood-cta-textDecoration
|
none |
--neighborhood-cta-textDecorationThickness
|
auto |
--neighborhood-cta-textDecorationThickness-hover
|
auto |
--neighborhood-cta-textDecorationColor
|
inherit |
--neighborhood-cta-textTransform
|
uppercase |
--neighborhood-cta-textUnderlineOffset
|
auto |
--neighborhood-cta-transitionFunction
|
ease-in-out |
--neighborhood-cta-transitionDuration
|
0.2s |
--neighborhood-cta-transitionProperty
|
background-color, color, text-decoration |