Documentation
Feedback
Guides
Storefront Development

Storefront Development
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

_10
import { Navbar, NavbarHeader, NavbarRow, NavbarButtons } from '@faststore/ui'

Import Styles

_10
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.
Example
Code

Props

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.
NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-navbar-header
NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-navbar-row
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
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

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page