react-swiper-sidenav

react-swiper-sidenav is a React component for creating responsive, swipeable side navigation menus. It allows you to display submenus in a way that the component slides forward, and you can go back to the previous parent menu by sliding backward with a smooth animation. You can also customize the style of the component by passing a style object or using CSS classes.

Installation

To install react-swiper-sidenav, you can use npm or yarn:

npm install react-swiper-sidenav
# or
yarn add react-swiper-sidenav

Usage

To use react-swiper-sidenav, you need to import the SideNav component and pass it an object of type NavItems that defines the structure of your menus. You also need to provide an onClose function that handles the closing of the side navigation. Optionally, you can customize the appearance and behavior of the component by passing other props such as open, placement, zIndex, navProps, variant, etc. Here is an example of usage:

import { SideNav, NavItems } from 'react-swiper-sidenav';
import { Link } from "react-router-dom";

type CustomLinkProps = {
  to: string;
  label?: string;
};

const CustomLink = ({ to, label }: CustomLinkProps) => {
  return <Link to={to}>{label}</Link>;
};

const navItems: NavItems = {
  name: "Main",
  childrenItems: [
    {
      name: "Computers",
      childrenItems: [
        {
          name: "Desktops",
          childrenItems: [
            {
              itemProps: {
                to: "/gaming",
                label: "Gaming",
              },
            },
            {
              itemProps: {
                to: "/workstations",
                label: "Workstations",
              },
            },
            {
              itemProps: {
                to: "/all-in-one",
                label: "All-in-One",
              },
            },
          ],
        },
      ],
    },
  ],
};

function App() {
  return (
    <SideNav
      navItems={navItems}
      open={open}
      onClose={onClose}
      renderLink={CustomLink}
    />
  )
}

Live demo

You can see a live demo of the component here: live demo.

Props

The SideNav component accepts the following props:

| Name | Type | Default | Description | | ---------------- | --------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | navItems | NavItems | required | An object that defines the structure of the menus. The object can have the following properties: name, childrenItems, itemProps, renderItem, disableClose, className, classes. Where childrenItems is an array of NavItems. See the Types section for more details. | | onClose | () => void | required | A function that handles the closing of the side navigation. | | open | boolean | false | A boolean value that indicates whether the side navigation is open or not. | | zIndex | number | 500 | A number that specifies the z-index of the side navigation. | | children | React.ReactNode | null | A React node that can be rendered inside the side navigation. | | placement | Placement | 'left' | A string that specifies the placement of the side navigation. It can be either 'left' or 'right'. | | hideBackdrop | boolean | false | A boolean value that indicates whether to hide the backdrop behind the side navigation or not. | | variant | Variant | 'temporary' | A string that specifies the variant of the side navigation. It can be either 'temporary' or 'permanent'. The temporary variant will close the side navigation when the backdrop is clicked, while the permanent variant will keep it open. | | style | React.CSSProperties | {} | A style object that can be applied to the side navigation container. | | navProps | React.HTMLAttributes | {} | An object that can be passed as props to the side navigation element. | | spreadCssClasses | boolean | true | A boolean value that indicates whether to spread the css classes of the navItems to their children or not. | | renderLink | (props: any) => React.JSX.Element | undefined | A function that can be used to render a custom link component for the navItems. |

Types

The SideNav component uses the following types:

export type Classes = {
  container?: string
  back?: string
  head?: string
  items?: string
}

export type NavItems = {
  name?: string
  childrenItems?: NavItems[]
  itemProps?: React.AllHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLLIElement> | any
  renderItem?: React.ReactNode
  disableClose?: boolean
  className?: string
  classes?: Classes
}

export type Variant = 'temporary' | 'permanent'
export type Placement = 'left' | 'right'

export interface ISideNavProps {
  navItems: NavItems
  onClose: () => void
  open?: boolean
  zIndex?: number
  children?: React.ReactNode
  placement?: Placement
  hideBackdrop?: boolean
  variant?: Variant
  style?: React.CSSProperties
  navProps?: React.HTMLAttributes<HTMLElement>
  spreadCssClasses?: boolean
  renderLink?: (props: any) => React.JSX.Element
}

NavItems

The type NavItems is an object that defines the structure of the menus. The object can have the following properties:

| Property | Type | Description | | ------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | name | string | The name of the menu item. It will be displayed as a text or a link, depending on whether the item has children or not. | | childrenItems | NavItems[] | An array of objects that defines the submenus of the menu item. If the item has children, it will be displayed as a link that opens the submenus when clicked. | | itemProps | React.AllHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLLIElement> | any | An object that can be passed as props to the menu item element. It can be any HTML attribute or a custom prop. | | renderItem | React.ReactNode | A React node that can be used to render a custom menu item. It will override the default rendering of the name and the itemProps. | | disableClose | boolean | A boolean value that indicates whether to disable the closing of the side navigation when the menu item is clicked or not. | | className | string | A string that specifies the CSS class name of the menu item. | | classes | Classes | An object that specifies the CSS class names of the menu item container, the back button, the head element, and the items element. See the Classes type for more details. |

License

ISC