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

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 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/NavbarSlider/styles.scss';

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


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.


Props

Navbar Slider

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.

Navbar Slider Header

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.

Navbar Slider Content

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

Navbar Slider Footer

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

Header

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))

Footer

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)

Logo

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


Related components