Navbar
Represents the page header and groups features like Search and Regionalization.
2 min read
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.Example
Code
Usage
Import the component
_10import { Navbar, NavbarHeader, NavbarRow, NavbarButtons } from '@faststore/ui'
Hooks used in the example
The Code tab of the example uses the following FastStore hooks, both imported from
@faststore/ui:useScrollDirection: detects the scroll direction (up or down) so theNavbarcan hide or show on scroll.useUI: gives access to the global UI state, such as opening the navigation menu (openNavbar) and checking whether it is displayed (navbar). It requires the component to be wrapped byUIProvider.
For more information, see FastStore hooks.
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%) |
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