Nerds Pledge Magnanimously

    @asphalt-react/sidebar

    1.14.1 • Public • Published

    Sidebar

    Sidebar is used to display vertical primary navigation. It represents a list of links that can either take the user to another page or to another section on same page.

    It is contructed using 3 sections:

    1. Header: Application logo can be added using the logo prop.
    2. Navigation: Contains all the links for navigation. Links can be added using NavItem, <NavItemMenu> and <SubItem/> component.
    3. Footer: Avatar can be used here for user profile and ActionList to add some extra actions. They can be passed using footer prop.

    Sidebar is fully responsive and can be added to the application in several variants which are linear, nested(single level), links with/without icon, links grouped together based on related category. You can use the component <SubItem/> inside <NavItemMenu> to achieve nested links. For grouped links in sidebar, use component <NavItem/> or <NavItemMenu/> inside <NavGroup/>. To set an item selected in sidebar, we suggest you to update state URL and pass active prop to the respective link component. Sidebar takes the height of the parent in which its rendered.

    Usage

    import Sidebar, { Nav, NavItem } from "@asphalt-react/sidebar"
    
    function App () {
    
      return (
        <Sidebar>
          <Nav>
            <NavItem tagProps={{ href: "/" }} active>Home</NavItem>
            <NavItem tagProps={{ href: "/Dashboard" }}>Dashboard</NavItem>
          </Nav>
        </Sidebar>
      );
    }
    
    export default App;
    

    Props

    children

    React node to render in the Sidebar content

    type required default
    node true N/A

    logo

    Logo to be rendered inside Sidebar header

    type required default
    node false N/A

    footer

    Content to display at the bottom of Sidebar

    type required default
    node false N/A

    onSelect

    onSelect is called when users select an item.

    The argument is an object of shape

    {
      event: React synthetic event
    }

    Note: This prop has been deprecated & will be removed in the next major version

    type required default
    func false N/A

    Nav

    This component is used to render container for all the nav links in Sidebar.

    Props

    children

    React nodes to render in the Nav content

    type required default
    node true N/A

    NavItem

    Using NavItem component, links can be added to the Sidebar. Navitem renders an <a> tag as default.

    ⚠️ The NavItem component is different from the one in @asphalt-react/appbar

    Props

    children

    React node to be shown as caption for the link

    type required default
    any false N/A

    as

    Html element/React component to be rendered

    type required default
    elementType false "a"

    tagProps

    Props for the NavItem element being rendered. Attributes like href, name can be passed

    type required default
    object false { href: "#" }

    active

    Determines if NavItem is currently selected

    type required default
    bool false N/A

    qualifier

    Renders an icon before the NavItem caption

    type required default
    element false null

    NavItemMenu

    This component is used to display a menu in the nav. It supports single level nesting. Sub items link can added inside menu using <SubItem/> component.

    Props

    children

    React node to render as subitems in the NavMenu content

    type required default
    any false N/A

    as

    Html element/React component to be rendered

    type required default
    elementType false "a"

    tagProps

    Props for the NavItemMenu element being rendered. Attributes like href, name can be passed

    type required default
    object false { href: "#" }

    caption

    Caption for NavItemMenu

    type required default
    any false N/A

    active

    Determines if item is currently selected

    type required default
    bool false N/A

    qualifier

    Renders an icon before the NavItemMenu caption

    type required default
    element false null

    SubItem

    This component is used to renders subitem link inside NavItemMenu

    Props

    children

    React node to render as text content for the link

    type required default
    node false N/A

    as

    Html element/React component to be rendered

    type required default
    elementType false "a"

    active

    Determines if item is currently selected

    type required default
    bool false N/A

    tagProps

    Props for the SubItem element being rendered. Attributes like href, name can be passed

    type required default
    object false { href: "#" }

    qualifier

    Renders an icon before the SubItem caption

    type required default
    element false N/A

    NavGroup

    Using NavGroup component, you can group together a list of nav items based on related category. Links can be provided using component <NavItem/> or <NavItemMenu/> passed inside this component as children and group heading using prop heading.

    Props

    children

    React nodes to render as nav items in the NavGroup

    type required default
    node true N/A

    heading

    Heading of the NavGroup

    type required default
    node true N/A

    Install

    npm i @asphalt-react/sidebar

    DownloadsWeekly Downloads

    47

    Version

    1.14.1

    License

    UNLICENSED

    Unpacked Size

    102 kB

    Total Files

    17

    Last publish

    Collaborators

    • abhinav.preetu
    • ashishmishra26
    • detj