⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

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 into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

@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.


Props

Navbar

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-navbar
scrollDirection*stringSpecifies the scroll direction. This value can be achieved using the `useScrollDirection` hook.

Navbar Header

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-navbar-header

Navbar Row

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-navbar-row

Navbar Buttons

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-navbar-buttons
searchExpanded*false | trueSpecifies whether the Search Input is expanded or not.

Design Tokens

Local tokenDefault value/Global token linked
--fs-navbar-height-mobile3.5rem
--fs-navbar-bkg-color
rgb(255 255 255 / 90%)
--fs-navbar-transition-timingvar(--fs-transition-timing)
--fs-navbar-transition-functionvar(--fs-transition-function)
--fs-navbar-box-shadow0 var(--fs-spacing-0) var(--fs-spacing-3) rgb(0 0 0 / 5%)

Nested Elements

Navbar Header

Local tokenDefault value/Global token linked
--fs-navbar-header-padding0 var(--fs-spacing-0)
--fs-navbar-header-padding-top-notebookvar(--fs-spacing-1)
--fs-navbar-header-padding-bottom-notebookvar(--fs-navbar-header-padding-top-notebook)

Search

Local tokenDefault value/Global token linked
--fs-navbar-search-button-icon-width-mobilevar(--fs-spacing-5)
--fs-navbar-search-button-icon-height-mobilevar(--fs-navbar-search-button-icon-width-mobile)

Search Expanded

Local tokenDefault value/Global token linked
--fs-navbar-search-expanded-input-widthcalc(100% - var(--fs-spacing-7))
--fs-navbar-search-expanded-button-icon-margin-right-4.063rem

Logo

Local tokenDefault value/Global token linked
--fs-navbar-logo-widthvar(--fs-logo-width)
--fs-navbar-logo-border-left-widthvar(--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


Related components