@asphalt-react/sidebar

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.

Touch Interactions

In small screen, Sidebar gets close on select an item and navigates to the respective page/url. You can opt to change the default behaviour by passing prop autoClose={false} to the nav item.

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 or text before the NavItem caption

type	required	default
union	false	null

autoClose

Set to false to avoid auto closing the sidebar on select the item in small screen

type	required	default
bool	false	true

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 or text before the NavItemMenu caption

type	required	default
union	false	null

autoClose

Set to false to avoid auto closing the sidebar on select the item in small screen

type	required	default
bool	false	true

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: "#" }

autoClose

Set to false to avoid auto closing the sidebar on select the item

type	required	default
bool	false	true

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