Logo

Component Blueprint

X: 1280 · Y: 720 · Grid: 8px

Navigation Menu

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

01 Hero Preview

Grid: 8px · Scale: 1:1

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

03 Examples

Basic

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

Component Sheet

Grid: 8px · Scale: 1:1

Indicator

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

Component Sheet

Grid: 8px · Scale: 1:1

RTL support

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

Component Sheet

Grid: 8px · Scale: 1:1

04 Custom Styling

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

Component Sheet

Grid: 8px · Scale: 1:1

05 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.

06 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));