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.Uses
NavbarHeader, NavbarRow and NavbarButtons as compound components.The NavbarLinks and NavbarSlider components are used as child components.
Example
Code
Usage
Import the component
_10import { Navbar, NavbarHeader, NavbarRow, NavbarButtons } from '@faststore/ui'
Import styles
To apply styles, include the following in your stylesheet:
_10@import '@faststore/ui/src/components/organisms/Navbar/styles.scss';
For details, see Importing FastStore UI component styles.
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) |
Data attributes
You can target and override
Navbar styles using the following data attributes:data-fs-navbardata-fs-navbar-headerdata-fs-navbar-rowdata-fs-navbar-buttonsProps
Navbar
| 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. |
Related components
Open Menu
NavbarSliderAs part of the Navbar, this component it its mobile version used to list the navigation links.
See more