Navbar

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.

<nav daff-navbar class="daff-basic-navbar">
  <div class="daff-basic-navbar__links">
    <a href="/">Home</a>
    <a href="/">About Us</a>
  </div>
  <button daff-button color="theme-contrast">Contact Us</button>
</nav>

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.

<nav daff-navbar [elevated]="true" class="daff-elevated-navbar">
  <div class="daff-elevated-navbar__links">
    <a href="/">Home</a>
    <a href="/">About Us</a>
  </div>
  <button daff-button>Contact Us</button>
</nav>

Blurred background

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

<nav daff-navbar [blurred]="true" class="daff-blurred-navbar">
  <div class="daff-blurred-navbar__links">
    <a href="/">Home</a>
    <a href="/">About Us</a>
  </div>
  <button daff-button>Contact Us</button>
</nav>
<div class="daff-blurred-navbar__body">
  Body
</div>

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.

<nav daff-navbar class="daff-contained-navbar">
  <daff-container size="md">
    <div class="daff-contained-navbar__links">
      <a href="/">Home</a>
      <a href="/">About Us</a>
    </div>
    <button daff-button>Contact Us</button>
  </daff-container>
</nav>

Accessibility

Daffodil provides

• 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>