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'

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.

The mobile version can be achieved with NavbarSlider as wrapper.

Example

Code

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-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-list`
marker	`false \| true`	Specify whether or not this component should display the list's markers (bullets or numbers).

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)`

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)`

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)`

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

Storefront
Login
Office
Home Appliances
Computer and Software
Technology
Navbar
Represents the page header and groups features like Search and Regionalization.
See more
Open Menu
NavbarSlider
As part of the Navbar, this component it its mobile version used to list the navigation links.
See more