Navbar

Navbar is a flexible and extensible component that provides a container for navigation elements.

Overview

The navbar contains minimal layout styles, allowing the content within it to be fluid and customizable. It utilizes the flex display and is customizable with all the flexbox properties. It's required to be used with the native HTML <nav> element to ensure an accessible experience by default.

Usage

ImportDAFF_NAVBAR_COMPONENTS into your component:

import { DAFF_NAVBAR_COMPONENTS } from '@daffodil/design/navbar';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_NAVBAR_COMPONENTS,
  ],
})
export class CustomComponent {}

Deprecation notice:

DaffNavbarModule is deprecated. Use the standalone component imports instead.

Anatomy

A navbar is a directive applied to a native <nav> element:

<nav daff-navbar>
  <!-- navigation items -->
</nav>

• nav[daff-navbar]: The directive applied to a native <nav> element. Provides flexbox layout and styling for navigation content.

Features

Elevation

Use the elevated property to add a shadow effect to the navbar.

Blurred background

Use the blurred property to add a semi-transparent background effect to the navbar, creating a frosted glass appearance.

Both elevated and blurred can be combined for a layered effect:

Contained navbar

A navbar can be contained to a specific width by using the container component. The layout styles set on the navbar will automatically be passed down to the container.

Accessibility

Built-in behavior

• Enforces the use of the native <nav> element so each navbar is recognized as a navigation landmark by assistive technology

Developer responsibilities

• If more than one navbar is used on the page, give each one a meaningful aria-label to distinguish them

<nav daff-navbar aria-label="main navigation">
<!--  navigation items -->
</nav>

<footer>
  <nav daff-navbar aria-label="footer navigation">
  <!--  navigation items -->
  </nav>
</footer>