Github

Navbar

Navbars provide top-level navigation and utility actions across the application.

Component variations

Basic Navbar

A simple navbar with content projection

Usage Guidelines

Import

Import the navbar component in your module or component:

import-navbar.ts

Copy code

Basic Implementation

Here is a basic example of using the navbar component with Angular content projection:

1. Implementation in template

my.component.html

Copy code

Best Practices

When to Use

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

When Not to Use

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

Design Guidelines

  • Use the navbar exclusively as the top-level application header, not inside child sections.
  • Keep the content projected into the navbar visually balanced (e.g. Logo on left, controls on right).
  • Ensure any interactive elements placed within the navbar are accessible and reachable by keyboard.
  • 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.