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.
Import
Import the component from @faststore/ui
_10import {_10 NavbarSlider,_10 NavbarSliderHeader,_10 NavbarSliderContent,_10 NavbarSliderFooter,_10} 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:
_10@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.
Example
Code
Open Menu
Props
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 |
| 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. |
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 |
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) |
Customization
For further customization, you can use the following data attributes:
data-fs-navbar-sliderdata-fs-navbar-slider-headerdata-fs-navbar-slider-contentdata-fs-navbar-slider-footer