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
import { Navbar, NavbarHeader, NavbarRow, NavbarButtons } from '@faststore/ui'Import Styles
import '@faststore/ui/src/components/organisms/Navbar/styles.scss'Usage
Uses NavbarHeader, NavbarRow and NavbarButtons as compound components.
The NavbarLinks and NavbarSlider components are used as child components.
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-navbar
data-fs-navbar-header
data-fs-navbar-row
data-fs-navbar-buttons