NavbarSlider
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.
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
Usage
Import the component
_10import {_10 NavbarSlider,_10 NavbarSliderHeader,_10 NavbarSliderContent,_10 NavbarSliderFooter,_10} from '@faststore/ui'
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/organisms/NavbarSlider/styles.scss";
For details, see Importing FastStore UI component styles.
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-navbar-slider-padding | var(--fs-spacing-3) |
Nested Elements
Header
| 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)) |
Footer
| 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) |
Logo
| Local token | Default value/Global token linked |
|---|---|
--fs-navbar-slider-logo-padding | 0 |
--fs-navbar-slider-logo-margin-right | var(--fs-spacing-5) |
Data attributes
You can target and override
NavbarSlider styles using the following data attributes:data-fs-navbar-sliderdata-fs-navbar-slider-headerdata-fs-navbar-slider-contentdata-fs-navbar-slider-footerProps
NavbarSlider
| 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 |
| onEntered | () => void | Callback function when the modal is opened. | |
| onDismiss | () => void | This function is called whenever the user clicks outside. the modal content | |
| overlayProps | Props | Props forwarded to the `Overlay` component. | |
| disableEscapeKeyDown | false | true | Disable being closed using the Escape key. | |
| fade* | "in" | "out" | Represents the fade effect of the SlideOver. |
NavbarSliderHeader
| 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. |
NavbarSliderContent
| 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 |
NavbarSliderFooter
| 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 |