Have ideas to improve npm?Join in the discussion! »

    TypeScript icon, indicating that this package has built-in type declarations

    4.0.6 • Public • Published


    Build Status coverage report npm version

    Side Navigation Component for React

    Alt Img


    react-sidenav are exported as an es module thus you would need a bundler to use it. It is also written in Typescript so it can be directly used with a typescript project as well.

    Peer Dependencies

    React 16.8


    As the current version of react-sidenav does not have any fixed rendering template, the user is free to render Nav items as they see fit. To render conditionally an item can get the context which contains the following attributes:

    property type description
    selected boolean if this Nav item is selected
    id string the id of the Nav as per props.id
    pathId string The path id, will be parentId
    level number The level of the Nav, starts with 1
    isLeaf boolean If true, then this Nav has no children

    Below is an example on how to use it.

        const Item = () => {
          const context = React.useContext(NavContext);
          return (
            <div style={{ color: context.selected: 'pink': 'inherit'}}>{ props.children }</div>
          <Nav id="1">
            <Item>Link 1</Item>
          <Nav id="2">
            <Item>Link 2</Item>
          <Nav id="3">
            <Item>Link 3</Item>

    SideNav Properties

    property type description isRequired
    onSelection function: ({id, path, payload}) => void a function that gets called when a navigation has been clicked false
    defaultSelectedPath string the default selection false
    mode compact, normal changes rendering style of children false, defaults to normal
    childrenToggleMode hover, click changes how children are expanded false, defaults to hover
    childrenToggleIndicator React Component the toggle indicator to render. The collapse, expand state is passed or you can use the NavGroupContext to get the collapse/expand state false

    Nav Properties

    property type description isRequired
    id a function that gets called when a navigation has been clicked true
    payload any passed to the listener when this nav is clicked false


    Please checkout example on CodeSandbox and the src/playground directory for now while all the documentation/testing is being completed.




    npm i react-sidenav

    DownloadsWeekly Downloads






    Unpacked Size

    23 kB

    Total Files


    Last publish


    • avatar