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'

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

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

⚠️

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>> \| Iterable<ReactNode> \| 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.

Name	Type	Description	Default
testId	`string`	ID 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> \| ReactPortal`	A react component to be used as the title in the header.
closeBtnProps	`Partial<Omit<IconButtonProps, "onClick">>`	Props for the Close Button component.
onClose*	`() => void`	Function called when Close Button is clicked.

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-navbar-slider-content`

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-navbar-slider-footer`

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