NavVerticalProvider

A collapsible navigation system with groups and nested destinations.

Interactive playground

LIVE PREVIEW

Loading preview…

Generated code

import { useState } from 'react';
import { NavVerticalProvider } from '@vrum/ui';
import { NavVertical, NavVerticalBrand, Logo, NavVerticalContent, NavSection, NavVerticalItem, NavSubMenu, NavVerticalFooter } from '@vrum/ui';

export default function Demo() {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <NavVerticalProvider
      collapsed={collapsed}
      onCollapsedChange={setCollapsed}
    >
      <NavVertical><NavVerticalBrand><Logo collapsed={collapsed} size="sm" /></NavVerticalBrand><NavVerticalContent><NavSection label="Workspace"><NavVerticalItem href="#overview" label="Overview" isActive>Overview</NavVerticalItem><NavVerticalItem href="#projects" label="Projects">Projects</NavVerticalItem><NavSubMenu><NavVerticalItem href="#atlas" label="Atlas">Atlas dashboard</NavVerticalItem></NavSubMenu></NavSection></NavVerticalContent><NavVerticalFooter version="v0.1.0" /></NavVertical>
    </NavVerticalProvider>
  );
}

NavVerticalProvider props

Prop	Type	Default	Description
`children*`	`React.ReactNode`	none	Content displayed inside the component.
`collapsed`	`boolean`	none	collapsed configuration.
`defaultCollapsed`	`boolean`	`false`	default collapsed configuration.
`onCollapsedChange`	`((collapsed: boolean) => void)`	none	on collapsed change configuration.

NavVertical props

Prop	Type	Default	Description
`label`	`string`	`"Sidebar navigation"`	Visible or accessible label.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLElement>`	none	on select configuration.

NavVerticalBrand props

Prop	Type	Default	Description
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

NavVerticalContent props

Prop	Type	Default	Description
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

NavSection props

Prop	Type	Default	Description
`label*`	`string`	none	Visible or accessible label.
`open`	`boolean`	none	Controlled visibility.
`defaultOpen`	`boolean`	`true`	Initial visibility for an uncontrolled component.
`onOpenChange`	`((open: boolean) => void)`	none	Called when visibility changes.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

NavVerticalItem props

Prop	Type	Default	Description
`icon`	`React.ReactNode`	none	icon configuration.
`isActive`	`boolean`	`false`	is active configuration.
`indented`	`boolean`	`false`	indented configuration.
`showLabel`	`boolean`	`true`	show label configuration.
`showChevron`	`boolean`	`false`	show chevron configuration.
`label`	`string`	none	Visible or accessible label.
`href`	`string`	none	href configuration.
`type`	`string`	none	type configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLAnchorElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLAnchorElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLAnchorElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLAnchorElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLAnchorElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLAnchorElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLAnchorElement>`	none	on select configuration.

NavSubMenu props

Prop	Type	Default	Description
`open`	`boolean`	`true`	Controlled visibility.
`sortable`	`boolean`	`false`	sortable configuration.
`items`	`{ id: string; label: string; href?: string; }[]`	none	items configuration.
`onReorder`	`((ids: string[]) => void)`	none	on reorder configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

NavVerticalFooter props

Prop	Type	Default	Description
`version`	`string`	none	version configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

NavVerticalProvider

Interactive playground

Props

NavVerticalProvider props

NavVertical props

NavVerticalBrand props

NavVerticalContent props

NavSection props

NavVerticalItem props

NavSubMenu props

NavVerticalFooter props

NavVerticalProvider

Interactive playground

Props

NavVerticalProvider props

NavVertical props

NavVerticalBrand props

NavVerticalContent props

NavSection props

NavVerticalItem props

NavSubMenu props

NavVerticalFooter props