Navbar

Represents the page header and groups features like Search and Regionalization.

The Navbar represents the page header and groups some features like: Search, Regionalization, SignIn, CartSidebar. This component is part of the Navigation feature.

Import

Import the component from @faststore/ui


_10import { Navbar, NavbarHeader, NavbarRow, NavbarButtons } 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/organisms/Navbar/styles.scss';

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

Usage

Uses NavbarHeader, NavbarRow and NavbarButtons as compound components.

The NavbarLinks and NavbarSlider components are used as child components.

Example

Code

Props

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-navbar`
scrollDirection*	`string`	Specifies the scroll direction. This value can be achieved using the `useScrollDirection` hook.

NavbarHeader

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-navbar-header`

NavbarRow

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-navbar-row`

NavbarButtons

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-navbar-buttons`
searchExpanded*	`false \| true`	Specifies whether the Search Input is expanded or not.

Design Tokens

Local token	Default value/Global token linked
`--fs-navbar-height-mobile`	`3.5rem`

`--fs-navbar-bkg-color`	`rgb(255 255 255 / 90%)`

`--fs-navbar-transition-timing`	`var(--fs-transition-timing)`
`--fs-navbar-transition-function`	`var(--fs-transition-function)`

`--fs-navbar-box-shadow`	`0 var(--fs-spacing-0) var(--fs-spacing-3) rgb(0 0 0 / 5%)`

Nested Elements

Navbar Header

Local token	Default value/Global token linked
`--fs-navbar-header-padding`	`0 var(--fs-spacing-0)`

`--fs-navbar-header-padding-top-notebook`	`var(--fs-spacing-1)`
`--fs-navbar-header-padding-bottom-notebook`	`var(--fs-navbar-header-padding-top-notebook)`

Search

Local token	Default value/Global token linked
`--fs-navbar-search-button-icon-width-mobile`	`var(--fs-spacing-5)`
`--fs-navbar-search-button-icon-height-mobile`	`var(--fs-navbar-search-button-icon-width-mobile)`

Search Expanded

Local token	Default value/Global token linked
`--fs-navbar-search-expanded-input-width`	`calc(100% - var(--fs-spacing-7))`

`--fs-navbar-search-expanded-button-icon-margin-right`	`-4.063rem`

Logo

Local token	Default value/Global token linked
`--fs-navbar-logo-width`	`var(--fs-logo-width)`
`--fs-navbar-logo-border-left-width`	`var(--fs-border-width)`
`--fs-navbar-logo-border-left-color`	`var(--fs-border-color-light)`

Customization

data-fs-navbar

data-fs-navbar-header

data-fs-navbar-row

data-fs-navbar-buttons

Open Menu
NavbarSlider
As part of the Navbar, this component it its mobile version used to list the navigation links.
See more
Office
Home Appliances
Computer and Software
Technology
NavbarLinks
Displays a set of navigation links.
See more