Logo

Navigation Menu

Website navigation primitive with dropdown-backed panels, rich links, indicators, viewport styling, direct links, and RTL support.

Preview

Usage

TS 

import { FrNavigationMenuModule } from '@frame-ui-ng/components/navigation-menu';

HTML 

<nav frNavigationMenu>
  <ul frNavigationMenuList>
    <li frNavigationMenuItem>
      <button [frNavigationMenuTrigger]="gettingStarted" type="button">
        Getting started
        <ng-icon name="tablerChevronDown" size="16" />
      </button>

      <ng-template #gettingStarted="frNavigationMenuContent" frNavigationMenuContent>
        <div frNavigationMenuPanel>
          <div frNavigationMenuGrid [columns]="2">
            <a frNavigationMenuLink frNavigationMenuFeature href="/docs/overview">
              <span frNavigationMenuLinkTitle>Angular Components</span>
              <span frNavigationMenuLinkDescription>
                Token-first primitives built for modern Angular.
              </span>
            </a>
            <div frNavigationMenuGrid>
              <a frNavigationMenuLink href="/docs/overview">
                <span frNavigationMenuLinkTitle>Introduction</span>
                <span frNavigationMenuLinkDescription>
                  Understand the library and styling foundation.
                </span>
              </a>
              <div frNavigationLinkSeparator></div>
              <a frNavigationMenuLink href="/docs/installation">
                <span frNavigationMenuLinkTitle>Installation</span>
                <span frNavigationMenuLinkDescription>
                  Add the library and configure shared styles.
                </span>
              </a>
            </div>
          </div>
        </div>
      </ng-template>
    </li>

    <li frNavigationMenuItem>
      <a frNavigationMenuLink href="/docs">Docs</a>
    </li>
  </ul>
  <div frNavigationMenuIndicator></div>
</nav>

Examples

Basic

Use triggers for destinations that need rich dropdown content and links for direct navigation.

Indicator

Use the indicator primitive when you want a visual bridge from trigger row to panel.

RTL support

Navigation menu inherits direction and supports aligned RTL dropdown panels through the content alignment input.

Custom Styling

Override navigation-menu tokens for the top-level trigger row and link cards, and dropdown-menu tokens for opened panel surfaces.

Token Inspector

Inspect the navigation shell, triggers, dropdown-backed panel, link cards, indicator, and viewport tokens.

Angular Components Token-first primitives built for modern Angular.
ButtonAction primitive.CardComposable surface.

Design Tokens

Navigation Menu defines tokens for trigger rows, rich links, feature cards, indicator, and viewport while opened panels reuse the dropdown-menu surface token contract.

SCSS 


  --frame-navigation-menu-gap: 0.25rem;
  --frame-navigation-menu-padding: 0.25rem;
  --frame-navigation-menu-radius: var(--frame-radius-md);
  --frame-navigation-menu-bg: transparent;
  --frame-navigation-menu-color: var(--frame-foreground);
  --frame-navigation-menu-trigger-height: 2.25rem;
  --frame-navigation-menu-trigger-padding-x: 0.875rem;
  --frame-navigation-menu-trigger-gap: 0.375rem;
  --frame-navigation-menu-trigger-radius: calc(var(--frame-navigation-menu-radius) - 0.125rem);
  --frame-navigation-menu-trigger-font-size: 0.875rem;
  --frame-navigation-menu-trigger-font-weight: 500;
  --frame-navigation-menu-trigger-bg: transparent;
  --frame-navigation-menu-trigger-color: var(--frame-navigation-menu-color);
  --frame-navigation-menu-trigger-hover-bg: var(--frame-accent);
  --frame-navigation-menu-trigger-hover-color: var(--frame-accent-foreground);
  --frame-navigation-menu-trigger-open-bg: var(--frame-accent);
  --frame-navigation-menu-trigger-open-color: var(--frame-accent-foreground);
  --frame-navigation-menu-content-width: 36rem;
  --frame-navigation-menu-content-gap: 0.75rem;
  --frame-navigation-menu-link-gap: 0.25rem;
  --frame-navigation-menu-link-padding: 0.75rem;
  --frame-navigation-menu-link-radius: var(--frame-radius-md);
  --frame-navigation-menu-link-hover-bg: var(--frame-accent);
  --frame-navigation-menu-link-active-bg: var(--frame-accent);
  --frame-navigation-menu-link-separator-color: var(--frame-border);
  --frame-navigation-menu-link-separator-margin-y: 0.25rem;
  --frame-navigation-menu-feature-bg: linear-gradient(135deg, var(--frame-muted), color-mix(in srgb, var(--frame-primary) 12%, var(--frame-surface)));
  --frame-navigation-menu-indicator-size: 0.625rem;
  --frame-navigation-menu-viewport-bg: var(--frame-dropdown-menu-panel-bg, var(--frame-surface));