Documentation
Feedback
Guides
Storefront Development

Storefront Development
Navbar Links

Displays a set of navigation links.

A wrapper used to display a set of navigation links that self adapts on mobile or desktop screens.
This component is part of the Navigation feature and must be used in the Navbar context.

Import

Import the component from @faststore/ui

_10
import {
_10
NavbarLinks,
_10
NavbarLinksList,
_10
NavbarLinksListItem,
_10
} from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

_10
@import '@faststore/ui/src/components/molecules/NavbarLinks/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

The mobile version can be achieved with NavbarSlider as wrapper.
Example
Code

Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-navbar-links

Design Tokens

Local tokenDefault value/Global token linked
--fs-navbar-links-bkg-color
--fs-color-body-bkg
--fs-navbar-links-transition-propertyvar(--fs-transition-property)
--fs-navbar-links-transition-timingvar(--fs-transition-timing)
--fs-navbar-links-transition-functionvar(--fs-transition-function)
--fs-navbar-links-border-top-width-mobilevar(--fs-border-width)
--fs-navbar-links-border-top-color-mobile
var(--fs-border-color-light)
--fs-navbar-links-border-bottom-width-mobilevar(--fs-navbar-links-border-top-width-mobile)
--fs-navbar-links-border-bottom-color-mobile
var(--fs-navbar-links-border-top-color-mobile)

Nested Elements

Local tokenDefault value/Global token linked
--fs-navbar-links-link-width-notebookauto
--fs-navbar-links-link-padding-notebook0 var(--fs-spacing-0)

List

Local tokenDefault value/Global token linked
--fs-navbar-links-list-padding-left-notebookvar(--fs-spacing-3)
--fs-navbar-links-list-margin-left-notebookvar(--fs-spacing-2)
--fs-navbar-links-list-border-left-width-notebookvar(--fs-border-width)
--fs-navbar-links-list-border-left-color-notebook
var(--fs-border-color-light)

Customization

For further customization, you can use the following data attributes:
data-fs-navbar-links
data-fs-navbar-links-list
data-fs-navbar-links-list-item

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page