Documentation
Feedback
Guides
Storefront Development

Storefront Development
Navbar Slider

As part of the Navbar, this component it its mobile version used to list the navigation links.

As part of the Navbar, this component is its mobile version used to list the navigation links (through the NavbarLinks).
This component is part of the Navigation feature and must be used in the Navbar context.## Import
Import the component from @faststore/ui

_10
import {
_10
NavbarSlider,
_10
NavbarSliderHeader,
_10
NavbarSliderContent,
_10
NavbarSliderFooter,
_10
} from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/organisms/NavbarSlider/styles.scss'


Usage

This component is intended to be used only in the mobile version, but it can be adapted to a desktop version by customizing the component styles.
Example
Code

Open Menu


Props

NameTypeDescriptionDefault
isOpenfalse | trueA boolean value that represents the state of the slider.true
direction"leftSide" | "rightSide"Represents the side that the slider comes from.leftSide
size"full" | "partial"Represents the size of the slider.full
aria-labelledbystringIdentifies the element (or elements) that labels the current element. @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
children*string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalChildren or function as a children
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-navbar-slider
onDismiss() => voidThis function is called whenever the user clicks outside. the modal content
overlayPropsPropsProps forwarded to the `Overlay` component.
fade*"in" | "out"Represents the fade effect of the SlideOver.
NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-navbar-slider-header
children*string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA react component to be used as the title in the header.
closeBtnPropsPartial<Omit<IconButtonProps, "onClick">>Props for the Close Button component.
onClose*() => voidFunction called when Close Button is clicked.
NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-navbar-slider-content
NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-navbar-slider-footer

Design Tokens

Local tokenDefault value/Global token linked
--fs-navbar-slider-paddingvar(--fs-spacing-3)

Nested Elements

Local tokenDefault value/Global token linked
--fs-navbar-slider-header-height5rem
--fs-navbar-slider-header-padding-bottomvar(--fs-spacing-2)
--fs-navbar-slider-header-button-margin-rightcalc(-1 * var(--fs-spacing-1))
Local tokenDefault value/Global token linked
--fs-navbar-slider-footer-padding-topvar(--fs-navbar-slider-header-padding-bottom)
--fs-navbar-slider-footer-margin-topvar(--fs-navbar-slider-header-padding-bottom)
Local tokenDefault value/Global token linked
--fs-navbar-slider-logo-padding0
--fs-navbar-slider-logo-margin-rightvar(--fs-spacing-5)

Customization

For further customization, you can use the following data attributes:
data-fs-navbar-slider
data-fs-navbar-slider-header
data-fs-navbar-slider-content
data-fs-navbar-slider-footer

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