Navbar
This component represents the page header and groups features like Search and Regionalization.
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
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. |
Navbar Header
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-navbar-header |
Navbar Row
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-navbar-row |
Navbar Buttons
| 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-navbardata-fs-navbar-headerdata-fs-navbar-rowdata-fs-navbar-buttons