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.
The mobile version can be achieved with NavbarSlider as wrapper.
Example
Code
Usage
Import the component
_10import {_10 NavbarLinks,_10 NavbarLinksList,_10 NavbarLinksListItem,_10} from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/molecules/NavbarLinks/styles.scss";
For details, see Importing FastStore UI component styles.
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) |
Data attributes
You can target and override
NavbarLinks styles using the following data attributes:data-fs-navbar-linksdata-fs-navbar-links-listdata-fs-navbar-links-list-itemProps
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
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-navbar-links-list |
| marker | false | true | Specify whether or not this component should display the list's markers (bullets or numbers). |
Related components
Open Menu
NavbarSliderAs part of the Navbar, this component it its mobile version used to list the navigation links.
See more