Nav
Gravity provides four navigation menu types that work across mobile and desktop devices.
Vertical Nav
The VerticalNav
component is the primary desktop navigation used inside the main app. It displays navigation items with optional tooltips and is designed for large screen sizes.
Preview
Usage
Props
Prop | Description | Required | Value |
---|---|---|---|
items | array of navigation items | required | array of objects ({ label: string, link: string, icon: string, position: string }) |
Notes
The
VerticalNav
component uses theNavLink
fromreact-router-dom
for navigation links.The
Logo
,Button
,Icon
,Tooltip
,TooltipTrigger
, andTooltipContent
components from'components/lib'
are used for rendering the navigation items with tooltips.The
items
prop specifies the navigation items, each containing alabel
,link
,icon
, andposition
.The
position
property in each item determines whether the item is placed at the top or bottom of the navigation.
Drawer Nav
The DrawerNav
component is the primary mobile navigation used inside the main app. It displays navigation items within a drawer that can be opened and closed.
Preview
Usage
Props
Prop | Description | Required | Value |
---|---|---|---|
items | array of navigation items | required | array of objects ({ label: string, link: string, icon: string, position: string }) |
Notes
The
DrawerNav
component uses theSheet
,SheetClose
,Button
,Icon
,Logo
, andNavLink
components from'components/lib'
.The
items
prop specifies the navigation items, each containing alabel
,link
,icon
, andposition
.The
Sheet
component provides the drawer functionality.For more details, refer to the Shadcn Sheet documentation.
Sub Nav
The SubNav
component is a sub-navigation element that displays a list of navigation items. It supports permission-based item visibility and is fully responsive; displaying a select input on mobile, a horizontal bar on medium sized screens and a vertical sidebar on larger screens.
Preview
Usage
Props
Prop | Description | Required | Value |
---|---|---|---|
transparent | array of navigation items | optional | array of objects ({ label: string, link: string, icon: string, permission?: string }) |
Notes
The
SubNav
component usesNavLink
fromreact-router-dom
for navigation links.The
AuthContext
is used to handle permission-based item visibility.The
Select
component allows for navigation via a dropdown on smaller screens.The
Icon
component is used to display icons for each navigation item.The
location
andnavigate
hooks fromreact-router-dom
are used for managing navigation.
Last updated