Navbar Slider

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

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

Import Styles

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

⚠️

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.

Name	Type	Description	Default
isOpen	`false \| true`	A 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-labelledby	`string`	Identifies 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>> \| ReactFragment \| ReactPortal`	Children or function as a children
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-navbar-slider`
onDismiss	`() => void`	This function is called whenever the user clicks outside. the modal content
overlayProps	`Props`	Props forwarded to the `Overlay` component.
fade*	`"in" \| "out"`	Represents the fade effect of the SlideOver.

Local token	Default value/Global token linked
`--fs-navbar-slider-padding`	`var(--fs-spacing-3)`

Local token	Default value/Global token linked
`--fs-navbar-slider-header-height`	`5rem`
`--fs-navbar-slider-header-padding-bottom`	`var(--fs-spacing-2)`
`--fs-navbar-slider-header-button-margin-right`	`calc(-1 * var(--fs-spacing-1))`

Local token	Default value/Global token linked
`--fs-navbar-slider-footer-padding-top`	`var(--fs-navbar-slider-header-padding-bottom)`
`--fs-navbar-slider-footer-margin-top`	`var(--fs-navbar-slider-header-padding-bottom)`

Local token	Default value/Global token linked
`--fs-navbar-slider-logo-padding`	`0`
`--fs-navbar-slider-logo-margin-right`	`var(--fs-spacing-5)`

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