Github

Sidebar

Sidebars organize navigation links and sections for quick access across the app.

Component variations

Basic Sidebar

A simple sidebar with navigation items and icons

Main Menu

Nested Navigation

Sidebar with expandable nested menu items

Navigation

Multiple Sections

Sidebar with multiple grouped sections

Main

Management

Usage Guidelines

Import

Import the sidebar component and interfaces in your module or component:

import-sidebar.ts

Copy code

Interfaces

Understanding the sidebar navigation interfaces:

sidebar-interfaces.ts

Copy code

Basic Implementation

Create a simple sidebar navigation:

1. Define navigation sections

my.component.ts

Copy code

2. Use in template

my.component.html

Copy code

Nested Navigation Implementation

Create expandable menu items with children:

nested-navigation.ts

Copy code

Without Icons

Navigation items without icons (optional icon property):

without-icons.ts

Copy code

Hide Section Titles

Control section title visibility with showTitle property:

no-section-titles.ts

Copy code

API Reference

Component Inputs

Property
Type
Default
Required
Description
sections
VdSidebarNavSection[]
[]
Yes
Array of navigation sections to display in the sidebar

VdSidebarNavItem Interface

Properties for individual navigation items:

Property
Type
Required
Description
label
string
Yes
Display text for the navigation item
route
string
No
Route path for navigation (optional)
icon
string
No
Icon name to display before label (optional)
children
VdSidebarNavItem[]
No
Nested navigation items (optional)

VdSidebarNavSection Interface

Properties for navigation sections:

Property
Type
Required
Description
title
string
No
Section title to display
items
VdSidebarNavItem[]
Yes
Array of navigation items in this section
showTitle
boolean
No
Whether to show the section title. Defaults to true

Best Practices

When to Use

  • Use Sidebar when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Sidebar when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Keep navigation hierarchy shallow - limit to 2 levels when possible
  • Use clear, concise labels that describe the destination
  • Include icons for better visual recognition and accessibility
  • Group related navigation items into logical sections
  • Limit the number of top-level items to 5-7 for better scannability
  • Use consistent icon styles throughout the navigation
  • Provide visual feedback for active/current routes
  • Consider using section titles to organize complex navigation structures
  • Test navigation on mobile devices to ensure usability
  • Use expandable items for categories with multiple sub-pages
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Main Navigation

sidebar-playground.ts

Copy code