navigation-menu
Navigation menu is exposed as semantic nav markup with list, item, trigger,
link, and content parts.
<nav ng-navigation-menu>
<ul>
<li>
<button>Components</button>
<section>Links</section>
</li>
</ul>
</nav>
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Navigation Menu</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body ng-app="angular.css" ng-cloak data-example="navigation-menu-demo">
<main>
<nav ng-navigation-menu aria-label="Primary navigation">
<ul>
<li>
<button type="button">Getting started</button>
<section>
<ul>
<li>
<a href="#introduction">
<strong>Introduction</strong>
<span>Reusable components built with semantic HTML.</span>
</a>
</li>
<li>
<a href="#installation">
<strong>Installation</strong>
<span
>How to install dependencies and structure your app.</span
>
</a>
</li>
<li>
<a href="#typography">
<strong>Typography</strong>
<span>Styles for headings, paragraphs, lists...etc</span>
</a>
</li>
</ul>
</section>
</li>
<li>
<button type="button">Components</button>
<section>
<ul>
<li>
<a href="#alert-dialog">
<strong>Alert Dialog</strong>
<span
>A modal dialog with important content that expects a
response.</span
>
</a>
</li>
<li>
<a href="#hover-card">
<strong>Hover Card</strong>
<span>Preview content available behind a link.</span>
</a>
</li>
<li>
<a href="#progress">
<strong>Progress</strong>
<span>Displays the completion progress of a task.</span>
</a>
</li>
<li>
<a href="#scroll-area">
<strong>Scroll-area</strong>
<span>Visually or semantically separates content.</span>
</a>
</li>
<li>
<a href="#tabs">
<strong>Tabs</strong>
<span>Layered sections displayed one at a time.</span>
</a>
</li>
<li>
<a href="#tooltip">
<strong>Tooltip</strong>
<span>Information shown from keyboard focus or hover.</span>
</a>
</li>
</ul>
</section>
</li>
<li>
<button type="button">With Icon</button>
<section>
<ul>
<li>
<a href="#backlog">
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 8v4m0 4h.01"></path>
</svg>
Backlog
</a>
</li>
<li>
<a href="#todo">
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle
cx="12"
cy="12"
r="10"
stroke-dasharray="4 3"
></circle>
</svg>
To Do
</a>
</li>
<li>
<a href="#done">
<svg
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="m8 12 2.5 2.5L16 9"></path>
</svg>
Done
</a>
</li>
</ul>
</section>
</li>
<li>
<a href="#docs">Docs</a>
</li>
</ul>
</nav>
</main>
</body>
</html>
Installation
Install AngularCSS, load its stylesheet, and include the angular.css module in your AngularTS application. See Installation for the complete setup.
This component’s root directive is [ng-navigation-menu]. Importing the package registers it with the AngularCSS angular.css module; there is no per-component JavaScript registration step.
Anatomy
Directive selectors
ng-navigation-menu
Semantic structure
Use a native nav containing one direct list. Each list item may contain either a native link or a native button trigger followed by a semantic section. The root directive needs no child directives or anatomy classes.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
align | Input | Cross-axis alignment: start, center, or end. |
aria-controls | Output | ID of the element controlled by a trigger. |
aria-expanded | Output | Open or expanded state exposed to assistive technology. |
aria-hidden | Input/output | Whether generated or collapsed content is hidden from assistive technology. |
aria-labelledby | Output | ID of the element that supplies the accessible name. |
dir | Input | Text and interaction direction: ltr or rtl. |
disabled | Input | Disables native or component interaction. |
open | Input | Initial or controlled open state. |
role | Input/output | Explicit semantic role when native HTML does not provide one. |
Input attributes are read from authored HTML. Output attributes are maintained by AngularCSS for CSS and testing. Input/output attributes may be authored for a controlled initial state and are then synchronized by the directive.
CSS custom properties
| Variable | Purpose |
|---|---|
--navigation-menu-content-offset | Component styling variable. |
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
The directive owns site-navigation disclosure, focus restoration, direction-aware arrow movement, dynamic DOM-order synchronization, outside dismissal, and flyout collision handling. Native links continue to own navigation. URLs, routing, current-page state, authored controlled state, and application commands remain AngularTS or application concerns.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Use a native nav landmark containing a list. Keep destinations as native links and disclosure controls as native buttons; do not add menu or menuitem roles to site navigation. Triggers expose aria-expanded and aria-controls, direct links remain in horizontal keyboard order, and Escape restores focus to the active trigger.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target [ng-navigation-menu], semantic descendants, component classes, and generated state with ordinary CSS. Keep behavior and accessible state in the TypeScript directive; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.