Navbar 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
import {
NavbarLinks,
NavbarLinksList,
NavbarLinksListItem,
} from '@faststore/ui'Import Styles
import '@faststore/ui/src/components/molecules/NavbarLinks/styles.scss'Usage
⚠️
The mobile version can be achieved with NavbarSlider as wrapper.
Props
Navbar Links
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-navbar-links |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-navbar-links-padding-top-notebook | var(--fs-spacing-1) |
--fs-navbar-links-padding-bottom-notebook | var(--fs-navbar-links-padding-top-notebook) |
--fs-navbar-links-bkg-color | --fs-color-body-bkg |
--fs-navbar-links-transition-property | var(--fs-transition-property) |
--fs-navbar-links-transition-timing | var(--fs-transition-timing) |
--fs-navbar-links-transition-function | var(--fs-transition-function) |
--fs-navbar-links-border-top-width-mobile | var(--fs-border-width) |
--fs-navbar-links-border-top-color-mobile | var(--fs-border-color-light) |
--fs-navbar-links-border-bottom-width-mobile | var(--fs-navbar-links-border-top-width-mobile) |
--fs-navbar-links-border-bottom-color-mobile | var(--fs-navbar-links-border-top-color-mobile) |
Nested Elements
Link
| Local token | Default value/Global token linked |
|---|---|
--fs-navbar-links-link-width-notebook | auto |
--fs-navbar-links-link-padding-notebook | 0 var(--fs-spacing-0) |
List
| Local token | Default value/Global token linked |
|---|---|
--fs-navbar-links-list-padding-left-notebook | var(--fs-spacing-3) |
--fs-navbar-links-list-margin-left-notebook | var(--fs-spacing-2) |
--fs-navbar-links-list-border-left-width-notebook | var(--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