Sidebar component presents a navigation menu
!npm
Sidebar is used to display vertical primary navigation. It contains a list of links that can either take the user to another page or to another section on the same page. You can nest and categorize navigation links (a.k.a nav items). Sidebar is responsive and adapts to small, medium & large screens. You can also create a custom Sidebar through a family of unit components exported by Sidebar.
``jsx
import { Sidebar, Nav, NavItem, NavLink } from "@asphalt-react/sidebar"
function App () {
return (
);
}
export default App;
`
Sidebar has 3 sections:
1. Head: Add items in the head section such as Logo using the head prop.tail
2. Body: Contains the list of navigation items. This is the children.
3. Tail: Add items in the tail section such as user Avatar or logout button using the prop.
Sidebar exports a family of unit components to create the nav items:
1. Nav
2. NavItem
3. NavLink
4. NavItemCaption
5. NavItemIcon
6. NavItemAction
7. NavMenu
8. NavCategory
Using these components, you can create nav items, nested nav items (or nav menus) and even categorize them.
`jsx`
Find more details about these components below.
Sidebar adapts to smaller screens (below 600px) and renders the head section at the top of Sidebar's container. The body and tail sections are hidden under a hamburger button that appears in the head section.
Activating the hamburger button shows the hidden sections in a container (or drawer) that covers the complete screen. The hamburger button is replaced by a cross button to close the drawer. Sidebar also exposes a close() function that to close the drawer. It can be useful if you want to close the drawer on selecting a nav item. For example:
`jsx
import { Sidebar, Nav, NavItem, NavLink } from "@asphalt-react/sidebar"
function App () {
const close = () => Sidebar.close
return (
)
}
`
Sidebar adapts to smaller screens (below 600px) with the following accessibility features,
1. Sidebar accepts Esc to close the drawer.
2. Sidebar also traps focus in the drawer. Press Tab or Shift + Tab to toggle through the focusable elements.
Sidebar exports layout unit components using which you can create a custom implementation of Sidebar:
1. BaseSidebar
2. SidebarHead
3. SidebarBody
4. SidebarTail
These layout components do not respond to different screen sizes. You can wrap them in containers with media queries for the custom Sidebar to adapt to screen sizes. For example:
`css
@media only screen and (max-width: 600px) {
.container {
/ some styles /
}
.content {
/ some styles /
}
}
`
`jsx`
const CustomSidebar = () => {
return (
// NavItems
)
}
Find details about these components below.
Sidebar exports a useSidebar hook to help you create custom functionality.
React hook to implement the ability to open/close the Sidebar drawer in smaller screens. Let's look at the usage:
`jsx
import { BaseSidebar, useSidebar } from "@asphalt-react/sidebar"
const CustomSidebar = () => {
const { visible, open, close } = useSidebar({ defaultVisible: true })
return (
{visible ? (
) : (
)}
)
}
`
useSidebar returns an object with:
1. visible: A stateful boolean value to control the (open/close) state.
2. open: A function to open the drawer.
3. close: A function to close the drawer.
useSidebar accepts the defaultVisible prop as the argument.
[comment]: # "Sidebar Props"
React node to render in the Sidebar content.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
Content to display in the Sidebar head.
`jsx`
// children
| type | required | default |
| ---- | -------- | ------- |
| node | false | null |
Content to display in the Sidebar tail.
`jsx`
// children
| type | required | default |
| ---- | -------- | ------- |
| node | false | null |
"aria-label" for the button to hide the body section in smaller screens.
| type | required | default |
| ------ | -------- | -------------------------- |
| string | false | "close sidebar navigation" |
"aria-label" for the button to show the body section in smaller screens.
| type | required | default |
| ------ | -------- | ------------------------- |
| string | false | "open sidebar navigation" |
Sidebar shows the body section in the initial state.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
The Nav component renders a
tag to render the list of NavItem components.[comment]: # "Nav Props"
Props
$3
React nodes to render in the Nav content.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
NavItem
NavItem is the container for a navigation item. It renders an
tag and should be the direct child of the Nav component.[comment]: # "NavItem Props"
Props
$3
Content for a nav item.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
NavItemCaption
Renders the caption for a nav item.
[comment]: # "NavItemCaption Props"
Props
$3
React node to render the caption of the nav item.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
NavItemIcon
Use NavItemIcon to render icon for the nav items. It only accepts SVG. Use "@asphalt-react/iconpack" to get all Asphalt React icons.
[comment]: # "NavItemIcon Props"
Props
$3
Icon to enhance the nav item's caption. Accepts SVG.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
NavItemAction
Accepts elements for custom actions in a NavItem.
[comment]: # "NavItemAction Props"
Props
$3
React node to render action elements for a nav item.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
$3
Allow events to propagate to the parent element. It's
false by default to prevent events
on action elements to bubble up to the parent element. It comes in handy when you want to
prevent navigation but still allow the action.`jsx
Home
`| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
NavLink
Renders the link element (defaults to
) for a NavItem. The NavLinks accepts an active prop to let users know which item is currently selected.Active styles
NavLinks accept 2 active styles:
1. Prominent (default)
2. Highlight
If you use both the active styles together on a NavLink, it logs a warning in the developer console and falls back to the default active style.
`jsx
/ Logs a warning and falls back to "prominent" active style /
Home
`[comment]: # "NavLink Props"
Props
$3
React node to render link content.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
$3
Html element/React component to replace the default element. Using this prop, you can use your router's link element, such as "react-router-dom"'s Link element.
| type | required | default |
| ----------- | -------- | ------- |
| elementType | false | "a" |
$3
Pass the props such as "href", "id" for the custom link element passed in
prop.| type | required | default |
| ------ | -------- | ------- |
| object | false | {} |
$3
Marks the nav item as active.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
$3
The default active style. Adds an indicator to accent the active nav item.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
$3
A subtle active style. Highlights the surface of the nav item.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
$3
Adds padding on all sides.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |
NavMenu
NavMenu creates nested nav items. NavMenu renders a
tag and should be the direct child of Nav component. For example:`jsx
``The "Profile" and "Notification" NavItems will be indented from the rest of the NavItems.
[comment]: # "NavMenu Props"
React node to render nested NavItems.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
Hides the content of the NavMenu. Use this prop to toggle NavMenu items.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
Using NavCategory component, you can group a list of nav items based on related category.
[comment]: # "NavCategory Props"
Divide nav items into categories.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
Adds padding on all sides.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |
The base container unit component.
[comment]: # "BaseSidebar Props"
Container for the Sidebar content.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
The unit component for rendering the head section.
[comment]: # "SidebarHead Props"
React node to render content in the head section.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
Adds padding on all sides.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |
The unit component to render the main content or body.
[comment]: # "SidebarBody Props"
Container to render the nav items.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
Adds padding on all sides.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |
The unit component for rendering the tail section.
[comment]: # "SidebarTail Props"
React node to render content in the tail section.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
Adds padding on all sides.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |