NavbarLinks
Displays a set of navigation links.
The
NavbarLinks component displays 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
_10import {_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
NavbarLinks
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-navbar-links |
NavbarLinksList
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--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-linksdata-fs-navbar-links-listdata-fs-navbar-links-list-itemRelated components
Open Menu
NavbarSliderAs part of the Navbar, this component it its mobile version used to list the navigation links.
See more