Components on AngularCSS

calendar

Mon, 01 Jan 0001 00:00:00 +0000

Use data-calendar-generated with data-month="YYYY-MM" to render a complete month, including outside days. Previous and next controls update the visible month, while selecting a date updates data-value and emits angularcss:calendar-select. Bind that event with AngularTS ng-on-* so application state remains responsible for the selected value.

<section
 ng-calendar
 data-calendar-generated
 data-month="2026-05"
 data-value="{{ selectedDate }}"
 ng-on-angularcss:calendar-select="selectedDate = $event.detail.value"
>
 <header>
 <button type="button">Previous</button>
 <h2></h2>
 <button type="button">Next</button>
 </header>
 <div></div>
</section>

Use data-week-start="0" through "6" to choose the first weekday and data-show-outside-days="false" to hide outside dates. Set --calendar-cell-size in CSS to resize cells. Day cells support arrow keys, Home, End, Page Up, and Page Down. Month changes emit angularcss:calendar-month-change.

carousel

Mon, 01 Jan 0001 00:00:00 +0000

Use a required content viewport and track around authored slide items. The TypeScript directive initializes the locally bundled Embla engine, synchronizes controls and accessible state, and supports pointer dragging and keyboard navigation.

<section
 ng-carousel
 align="start"
 style="--carousel-item-size: 50%; --carousel-gap: 0.5rem"
>
 <div>
 <ul>
 <li>Slide</li>
 </ul>
 </div>
</section>

Use orientation="vertical" for vertical movement and dir="rtl" for RTL. --carousel-item-size controls single or multi-item layouts and --carousel-gap controls spacing. Add autoplay and optionally autoplay-delay="2000" for the same locally bundled plugin behavior as the checked-in reference. The root mirrors snap index, snap count, item count, and boundary state.

combobox

Mon, 01 Jan 0001 00:00:00 +0000

Compose a searchable listbox with one ng-combobox root and semantic child elements identified by combobox part classes. AngularTS ng-model, filters, and event expressions remain the source of truth for query and selected-value state. AngularCSS supplies popup disclosure, active-descendant navigation, disabled handling, collision placement, and visual state.

<div
 ng-combobox
 ng-on-angularcss:combobox-select="selected=$event.detail.value; query=selected"
>
 <header>
 <input
 aria-label="Framework"
 ng-model="query"
 placeholder="Select a framework"
 />
 <button type="button" aria-label="Show frameworks" value="toggle"></button>
 </header>
 <aside aria-label="Framework options">
 <p>No items found.</p>
 <div>
 <ul>
 <li
 ng-repeat="framework in frameworks | filter:query"
 data-value="{{ framework }}"
 ng-attr-aria-selected="{{ selected === framework }}"
 >
 {{ framework }}
 </li>
 </ul>
 </div>
 </aside>
</div>

Add auto-highlight when opening or filtering should highlight the first enabled result. Without it, the popup opens without an active option until the user presses an arrow key. Bind angularcss:combobox-open-change when the root uses controlled open="{{ state.open }}" state.

command

Mon, 01 Jan 0001 00:00:00 +0000

Build a searchable command menu with one ng-command root and semantic child elements identified by command part classes. AngularTS owns query filtering and command execution. Command follows the rendered result DOM and supplies listbox relationships, active-descendant navigation, disabled skipping, and scroll-to-active behavior.

<section ng-command variant="surface" aria-label="Command menu">
 <header>
 <label>
 <span aria-hidden="true"><!-- search icon --></span>
 <input
 aria-label="Search commands"
 ng-model="query"
 placeholder="Type a command or search..."
 />
 </label>
 </header>
 <div>
 <p>No results found.</p>
 <section>
 <h2>Suggestions</h2>
 <button
 type="button"
 ng-repeat="command in commands | filter:query"
 ng-click="selected=command.label"
 >
 <span ng-bind="command.label"></span>
 <kbd ng-bind="command.shortcut"></kbd>
 </button>
 </section>
 </div>
</section>

Use aria-disabled="true" or native disabled state for unavailable options. Arrow keys wrap through enabled rendered options; Home and End move to the boundaries; Enter activates the current option through its ordinary click handler. Pointer movement updates the same active state.

context-menu

Mon, 01 Jan 0001 00:00:00 +0000

Use a semantic trigger and content surface. AngularCSS owns right-click and keyboard disclosure, pointer placement, menu focus, and submenu navigation; AngularTS owns actions and checkbox or radio values.

<div ng-context-menu>
 <div>Right click here</div>
 <menu aria-label="Browser actions">
 <button ng-click="reload()">Reload</button>
 <button
 aria-checked="{{ showBookmarks }}"
 ng-click="showBookmarks=!showBookmarks"
 >
 Show Bookmarks Bar
 </button>
 </menu>
</div>

Ordinary click is left to the authored trigger. Right-click, Shift F10, and the Context Menu key open this component.

Basic And Submenu

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 Context 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
 ng-init="lastAction='None'"
 data-example="context-menu-basic context-menu-demo context-menu-submenu"
 >
 <main class="visual-example">
 <div id="context-menu-demo" ng-context-menu>
 <div>Right click here</div>
 <menu aria-label="Browser actions">
 <section>
 <button ng-click="lastAction='Back'">
 Back
 <kbd>Alt+Left</kbd>
 </button>
 <button disabled>
 Forward
 <kbd>Alt+Right</kbd>
 </button>
 <button ng-click="lastAction='Reload'">
 Reload
 <kbd>Ctrl+R</kbd>
 </button>
 </section>
 <hr />
 <section>
 <button ng-click="lastAction='Save'">
 Save
 <kbd>Ctrl+S</kbd>
 </button>
 </section>
 <details>
 <summary>More Tools</summary>
 <menu>
 <section>
 <button ng-click="lastAction='Save Page'">Save Page...</button>
 <button ng-click="lastAction='Create Shortcut'">
 Create Shortcut...
 </button>
 <button ng-click="lastAction='Name Window'">
 Name Window...
 </button>
 </section>
 <hr />
 <button ng-click="lastAction='Developer Tools'">
 Developer Tools
 </button>
 </menu>
 </details>
 <hr />
 <button variant="destructive" ng-click="lastAction='Delete'">
 Delete
 </button>
 </menu>
 </div>
 <output class="context-menu-output" aria-live="polite">
 Last action: <span ng-bind="lastAction"></span>
 </output>
 </main>
 </body>
</html>

Content And State

Icons, destructive actions, groups, shortcuts, checkbox values, and radio values are functional packaged scenarios.

dropdown-menu

Mon, 01 Jan 0001 00:00:00 +0000

Use ng-dropdown-menu on a wrapper with a trigger button and a native menu.

<div ng-dropdown-menu>
 <button type="button">Options</button>
 <menu>
 <a href="#new">New Task</a>
 <a href="#edit">Edit Task</a>
 <a href="#delete">Delete Task</a>
 </menu>
</div>

The directive adds the required menu roles and manages aria-expanded, aria-controls, outside-click close, Escape close, and arrow-key focus movement. It does not publish scope methods or own AngularTS application state. If the menu needs external control, bind the wrapper’s concise open attribute from AngularTS state.

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 Dropdown 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
 ng-init="menuState={toolbar:true,density:'comfortable'}"
 data-example="dropdown-menu-complex dropdown-menu-demo"
 >
 <div ng-dropdown-menu class="visual-example">
 <button type="button">Options</button>
 <menu style="--menu-width: 11rem">
 <section>
 <h3>Project</h3>
 <button>New task <kbd>Ctrl+N</kbd></button>
 <button>Edit task</button>
 </section>
 <hr />
 <button
 aria-checked="{{ menuState.toolbar }}"
 ng-click="menuState.toolbar=!menuState.toolbar"
 >
 Show toolbar
 </button>
 <fieldset aria-label="Density">
 <button
 aria-checked="{{ menuState.density === 'comfortable' }}"
 ng-click="menuState.density='comfortable'"
 >
 Comfortable
 </button>
 <button
 aria-checked="{{ menuState.density === 'compact' }}"
 ng-click="menuState.density='compact'"
 >
 Compact
 </button>
 </fieldset>
 <details>
 <summary>Share</summary>
 <menu>
 <button>Copy link</button>
 <button>Email link</button>
 </menu>
 </details>
 </menu>
 </div>
 </body>
</html>

Reference workflows

The workflow page covers basic and dynamically inserted items, an avatar trigger, AngularTS-owned checkbox and radio state, shortcuts, destructive items, submenus, right-to-left direction, and disabled triggers.

hover-card

Mon, 01 Jan 0001 00:00:00 +0000

Use ng-hover-card with a keyboard-focusable trigger and preview content. Pointer disclosure honors optional open-delay and close-delay values in milliseconds. Set side on the content to left, top, bottom, or right.

<span ng-hover-card open-delay="100" close-delay="100">
 <a href="#">@angularcss</a>
 <aside side="bottom">Preview</aside>
</span>

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 Hover Card</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="hover-card-demo">
 <main class="visual-example">
 <span ng-hover-card open-delay="10" close-delay="100">
 <button type="button" variant="link">Hover Here</button>
 <aside>
 <h3>@nextjs</h3>
 <p>The React Framework - created and maintained by @vercel.</p>
 <footer>Joined December 2021</footer>
 </aside>
 </span>
 </main>
 </body>
</html>

Physical sides

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Hover Card Workflows</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="hover-card-sides">
 <main class="hover-card-workflow">
 <header class="hover-card-workflow-header">
 <h2>Physical sides</h2>
 </header>
 <div class="hover-card-side-grid">
 <section class="hover-card-stage hover-card-stage-left">
 <span ng-hover-card open-delay="20" close-delay="100">
 <button type="button" variant="outline">Left</button>
 <aside side="left">
 <h3>Hover Card</h3>
 <p>This hover card appears on the left side of the trigger.</p>
 </aside>
 </span>
 </section>

 <section class="hover-card-stage hover-card-stage-top">
 <span ng-hover-card open-delay="20" close-delay="100">
 <button type="button" variant="outline">Top</button>
 <aside side="top">
 <h3>Hover Card</h3>
 <p>This hover card appears on the top side of the trigger.</p>
 </aside>
 </span>
 </section>

 <section class="hover-card-stage hover-card-stage-bottom">
 <span ng-hover-card open-delay="20" close-delay="100">
 <button type="button" variant="outline">Bottom</button>
 <aside side="bottom">
 <h3>Hover Card</h3>
 <p>This hover card appears on the bottom side of the trigger.</p>
 </aside>
 </span>
 </section>

 <section class="hover-card-stage hover-card-stage-right">
 <span ng-hover-card open-delay="20" close-delay="100">
 <button type="button" variant="outline">Right</button>
 <aside side="right">
 <h3>Hover Card</h3>
 <p>This hover card appears on the right side of the trigger.</p>
 </aside>
 </span>
 </section>
 </div>

 <footer class="hover-card-disabled-example">
 <span ng-hover-card open-delay="0" close-delay="0">
 <button type="button" variant="outline" disabled>Disabled</button>
 <aside>
 <p>Unavailable preview</p>
 </aside>
 </span>
 </footer>
 </main>
 </body>
</html>

Right-to-left

Physical left and right placement stays physical while text direction and content alignment follow the nearest authored dir attribute.

menubar

Mon, 01 Jan 0001 00:00:00 +0000

Use ng-menubar around a strip of menu groups. Menu triggers support:

ArrowLeft/ArrowRight to move between menus
Enter/Space/ArrowDown to open a menu
Escape to close menus
Home/End shortcuts when a trigger is focused

<nav ng-menubar aria-label="Application menu">
 <section>
 <button>File</button>
 <menu>
 <button>New</button>
 <button>Open</button>
 </menu>
 </section>
 <section>
 <button>Edit</button>
 </section>
</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 Menubar</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
 ng-init="menubarDemo={bookmarks:false,fullUrls:true,profile:'benoit'}"
 data-example="menubar-demo"
 >
 <main class="visual-example">
 <nav ng-menubar aria-label="Browser application menu">
 <section>
 <button type="button">File</button>
 <menu>
 <section>
 <button type="button">New Tab <kbd>⌘T</kbd></button>
 <button type="button">New Window <kbd>⌘N</kbd></button>
 <button type="button" disabled>New Incognito Window</button>
 </section>
 <hr />
 <section>
 <details>
 <summary>Share</summary>
 <menu>
 <section>
 <button type="button">Email link</button>
 <button type="button">Messages</button>
 <button type="button">Notes</button>
 </section>
 </menu>
 </details>
 </section>
 <hr />
 <section>
 <button type="button">Print... <kbd>⌘P</kbd></button>
 </section>
 </menu>
 </section>

 <section>
 <button type="button">Edit</button>
 <menu>
 <section>
 <button type="button">Undo <kbd>⌘Z</kbd></button>
 <button type="button">Redo <kbd>⇧⌘Z</kbd></button>
 </section>
 <hr />
 <section>
 <details>
 <summary>Find</summary>
 <menu>
 <button type="button">Search the web</button>
 <hr />
 <button type="button">Find...</button>
 <button type="button">Find Next</button>
 <button type="button">Find Previous</button>
 </menu>
 </details>
 </section>
 <hr />
 <section>
 <button type="button">Cut</button>
 <button type="button">Copy</button>
 <button type="button">Paste</button>
 </section>
 </menu>
 </section>

 <section>
 <button type="button">View</button>
 <menu>
 <section>
 <button
 type="button"
 aria-checked="{{ menubarDemo.bookmarks }}"
 ng-click="menubarDemo.bookmarks=!menubarDemo.bookmarks"
 >
 Bookmarks Bar
 </button>
 <button
 type="button"
 aria-checked="{{ menubarDemo.fullUrls }}"
 ng-click="menubarDemo.fullUrls=!menubarDemo.fullUrls"
 >
 Full URLs
 </button>
 </section>
 <hr />
 <section>
 <button type="button" inset>Reload <kbd>⌘R</kbd></button>
 <button type="button" inset disabled>
 Force Reload <kbd>⇧⌘R</kbd>
 </button>
 </section>
 <hr />
 <button type="button" inset>Toggle Fullscreen</button>
 <hr />
 <button type="button" inset>Hide Sidebar</button>
 </menu>
 </section>

 <section>
 <button type="button">Profiles</button>
 <menu>
 <fieldset aria-label="Active profile">
 <button
 type="button"
 aria-checked="{{ menubarDemo.profile === 'andy' }}"
 ng-click="menubarDemo.profile='andy'"
 >
 Andy
 </button>
 <button
 type="button"
 aria-checked="{{ menubarDemo.profile === 'benoit' }}"
 ng-click="menubarDemo.profile='benoit'"
 >
 Benoit
 </button>
 <button
 type="button"
 aria-checked="{{ menubarDemo.profile === 'luis' }}"
 ng-click="menubarDemo.profile='luis'"
 >
 Luis
 </button>
 </fieldset>
 <hr />
 <button type="button" inset>Edit...</button>
 <hr />
 <button type="button" inset>Add Profile...</button>
 </menu>
 </section>
 </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.

navigation-menu

Mon, 01 Jan 0001 00:00:00 +0000

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.

range-slider

Mon, 01 Jan 0001 00:00:00 +0000

Use ng-range-slider only when two or more native range inputs share one visual track. The parent inspects its direct inputs and computes composite geometry while every input retains native focus, keyboard, form, and AngularTS model behavior. Use the Range element for a single value.

<fieldset>
 <legend>Price range</legend>
 <div ng-range-slider min="0" max="100">
 <input
 aria-label="Minimum price"
 type="range"
 min="0"
 max="100"
 value="25"
 />
 <input
 aria-label="Maximum price"
 type="range"
 min="0"
 max="100"
 value="75"
 />
 </div>
</fieldset>

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 Range Slider</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
 ng-init="minimum = 25; maximum = 75"
 data-example="slider-demo"
 >
 <main class="visual-example">
 <header>
 <label id="price-range-label">Price range</label>
 <output>{{ minimum }}-{{ maximum }}</output>
 </header>
 <div
 ng-range-slider
 min="0"
 max="100"
 aria-labelledby="price-range-label"
 >
 <input
 aria-label="Minimum price"
 type="range"
 min="0"
 max="100"
 ng-model="minimum"
 />
 <input
 aria-label="Maximum price"
 type="range"
 min="0"
 max="100"
 ng-model="maximum"
 />
 </div>
 </main>
 </body>
</html>

Reference workflows

The workflow page covers controlled and multi-thumb ranges, disabled state, right-to-left direction, and vertical orientation. Every thumb uses the same absolute bounds so its native position remains accurate. Applications that require ordered or non-crossing values enforce that policy in AngularTS state.

resizable

Mon, 01 Jan 0001 00:00:00 +0000

Use ng-resizable-panel-group with alternating native section and hr elements. Resize separators support pointer dragging and keyboard control.

<div ng-resizable-panel-group aria-label="Resizable layout">
 <section style="--panel-size: 1">Preview</section>
 <hr aria-label="Resize preview and details" />
 <section>Details</section>
</div>

Set orientation="vertical" on the group to stack panels. Handles receive separator roles, orientation, value bounds, current values, and aria-controls relationships. Dragging or pressing Arrow, Home, and End keys updates adjacent panel --panel-size values within data-min-size and data-max-size; RTL reverses horizontal changes. CSS renders a visible grip without additional markup.

sidebar

Mon, 01 Jan 0001 00:00:00 +0000

Use ng-sidebar on an aside inside .sidebar-layout and connect native button triggers with aria-controls. Author physical side, visual variant, and collapse mode directly on the sidebar root.

<div>
 <aside id="app-sidebar" ng-sidebar side="left" collapsible="icon">
 <header>
 <a href="/">Acme Inc.</a>
 </header>
 <nav>
 <section>
 <h3>Workspace</h3>
 <div>
 <ul>
 <li>
 <a aria-current="page" href="/dashboard"> Dashboard </a>
 </li>
 </ul>
 </div>
 </section>
 </nav>
 </aside>
 <main>
 <button aria-controls="app-sidebar">Toggle sidebar</button>
 </main>
</div>

The directive reads root options and coordinates collapse, group relationships, and trigger accessibility state. AngularTS may control the boolean collapsed attribute; it continues to own filtering, shortcuts, routing, and actions. Compose nested disclosure with native details.disclosure and action menus with ng-dropdown-menu. Add responsive to an off-canvas sidebar to initialize it collapsed below 48rem and expanded at larger viewport widths.

tabs

Mon, 01 Jan 0001 00:00:00 +0000

Add ng-tabs to a section, place native buttons in its list, and follow the list with direct semantic section or article panels. The directive assigns tab roles, relationships, selection state, and keyboard navigation.

<section ng-tabs>
 <menu>
 <button aria-selected="true">Overview</button>
 </menu>
 <section>Content</section>
</section>

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 Tabs</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="tabs-demo">
 <section ng-tabs>
 <menu aria-label="Project sections">
 <button aria-selected="true">Overview</button>
 <button>Analytics</button>
 <button>Reports</button>
 <button>Settings</button>
 </menu>
 <article>
 <header>
 <h2>Overview</h2>
 <p>
 View your key metrics and recent project activity. Track progress
 across all your active projects.
 </p>
 </header>
 <section class="muted">
 You have 12 active projects and 3 pending tasks.
 </section>
 </article>
 <article>
 <header>
 <h2>Analytics</h2>
 <p>
 Track performance and user engagement metrics. Monitor trends and
 identify growth opportunities.
 </p>
 </header>
 <section class="muted">
 Page views are up 25% compared to last month.
 </section>
 </article>
 <article>
 <header>
 <h2>Reports</h2>
 <p>
 Generate and download your detailed reports. Export data in multiple
 formats for analysis.
 </p>
 </header>
 <section class="muted">
 You have 5 reports ready and available to export.
 </section>
 </article>
 <article>
 <header>
 <h2>Settings</h2>
 <p>
 Manage your account preferences and options. Customize your
 experience to fit your needs.
 </p>
 </header>
 <section class="muted">
 Configure notifications, security, and themes.
 </section>
 </article>
 </section>
 </body>
</html>

Workflows

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Tabs Workflows</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
 ng-init="advancedVisible = false; overviewDisabled = false"
 data-example="tabs-disabled tabs-icons tabs-line tabs-rtl tabs-vertical"
 >
 <main class="tabs-workflows visual-example">
 <section aria-labelledby="tabs-dynamic-heading">
 <header>
 <h2 id="tabs-dynamic-heading">Dynamic sections</h2>
 <button
 type="button"
 variant="outline"
 size="sm"
 ng-click="advancedVisible = !advancedVisible"
 >
 {{ advancedVisible ? 'Remove advanced' : 'Add advanced' }}
 </button>
 </header>
 <section ng-tabs id="dynamic-tabs">
 <menu aria-label="Dynamic project sections">
 <button aria-selected="true">Overview</button>
 <button>Activity</button>
 <button ng-if="advancedVisible">Advanced</button>
 </menu>
 <section>Project overview</section>
 <section>Recent project activity</section>
 <section ng-if="advancedVisible">Advanced project controls</section>
 </section>
 </section>

 <section aria-labelledby="tabs-disabled-heading">
 <header>
 <h2 id="tabs-disabled-heading">Disabled state</h2>
 <button
 type="button"
 variant="outline"
 size="sm"
 ng-click="overviewDisabled = !overviewDisabled"
 >
 {{ overviewDisabled ? 'Enable overview' : 'Disable overview' }}
 </button>
 </header>
 <section ng-tabs id="disabled-tabs">
 <menu aria-label="Account sections">
 <button aria-selected="true" ng-disabled="overviewDisabled">
 Overview
 </button>
 <button>Settings</button>
 <button disabled>Unavailable</button>
 </menu>
 <section>Account overview</section>
 <section>Account settings</section>
 <section>Unavailable settings</section>
 </section>
 </section>

 <section aria-labelledby="tabs-vertical-heading">
 <header><h2 id="tabs-vertical-heading">Vertical</h2></header>
 <section ng-tabs orientation="vertical" id="vertical-tabs">
 <menu aria-label="Preference sections">
 <button aria-selected="true">Account</button>
 <button>Password</button>
 <button>Notifications</button>
 </menu>
 <section>Account preferences</section>
 <section>Password preferences</section>
 <section>Notification preferences</section>
 </section>
 </section>

 <section aria-labelledby="tabs-variants-heading">
 <header><h2 id="tabs-variants-heading">Variants</h2></header>
 <div class="tabs-variant-stack">
 <section ng-tabs id="icon-tabs">
 <menu aria-label="Editor view">
 <button aria-selected="true">
 <svg
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 aria-hidden="true"
 >
 <rect x="3" y="4" width="18" height="16" rx="2" />
 <path d="M3 9h18" />
 </svg>
 Preview
 </button>
 <button>
 <svg
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 aria-hidden="true"
 >
 <path d="m8 9-3 3 3 3M16 9l3 3-3 3" />
 </svg>
 Code
 </button>
 </menu>
 </section>
 <section ng-tabs id="line-tabs">
 <menu variant="line" aria-label="Report sections">
 <button aria-selected="true">Overview</button>
 <button>Analytics</button>
 <button>Reports</button>
 </menu>
 </section>
 </div>
 </section>

 <section aria-labelledby="tabs-rtl-heading" dir="rtl" lang="ar">
 <header><h2 id="tabs-rtl-heading">الاتجاه من اليمين</h2></header>
 <section ng-tabs id="rtl-tabs">
 <menu aria-label="أقسام المشروع">
 <button>نظرة عامة</button>
 <button aria-selected="true">التحليلات</button>
 <button>التقارير</button>
 </menu>
 <section>نظرة عامة على المشروع</section>
 <section>تحليلات المشروع</section>
 <section>تقارير المشروع</section>
 </section>
 </section>
 </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.

toast

Mon, 01 Jan 0001 00:00:00 +0000

Use ng-toast on the container; direct article children are toast items. Application code owns toast creation and queueing. Set type or variant to success, info, warning, error, or loading; the directive mirrors the result to data-type for styling.

<div ng-toast>
 <article type="success">
 <article>
 <article>Saved</article>
 <article>Update published.</article>
 </article>
 </article>
</div>

Toast titles and descriptions are connected through aria-labelledby and aria-describedby. Authored relationships are preserved. Toast action and close buttons default to type="button", so they do not submit an enclosing form.

toolbar

Mon, 01 Jan 0001 00:00:00 +0000

Add ng-toolbar to a semantic action container. AngularCSS provides one tab stop and arrow-key movement while native buttons, links, and AngularTS retain activation and command ownership.

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 Toolbar</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="toolbar-demo">
 <main class="visual-example">
 <menu ng-toolbar aria-label="Document actions">
 <button size="icon-sm" variant="ghost" aria-label="Undo">↶</button>
 <button size="icon-sm" variant="ghost" aria-label="Redo" disabled>
 ↷
 </button>
 <hr />
 <button size="sm" variant="ghost">Copy</button>
 <button size="sm" variant="ghost">Archive</button>
 <button size="sm" variant="ghost">Export</button>
 </menu>
 </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.

tooltip

Mon, 01 Jan 0001 00:00:00 +0000

Use a native trigger with short, non-interactive descriptive content. Content can be held visible with the wrapper’s concise open attribute for controlled examples.

<span ng-tooltip>
 <button>Hover</button>
 <span side="top">Add to library</span>
</span>

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 Tooltip</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="tooltip-demo">
 <main class="visual-example">
 <span ng-tooltip>
 <button type="button" variant="outline">Hover</button>
 <span side="top">Add to library</span>
 </span>
 </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.

tree

Mon, 01 Jan 0001 00:00:00 +0000

Add ng-tree to a nested native list. The root directive supplies the hierarchical focus, expansion, selection, and typeahead behavior that HTML does not provide by itself.

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 Tree</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="tree-demo">
 <div class="visual-example">
 <ul
 ng-tree
 aria-label="Organization"
 ng-on-angularcss:tree-select="selectedNode=$event.detail.value"
 >
 <li data-value="operations" aria-expanded="true">
 <span>Operations <small>12</small></span>
 <ul>
 <li data-value="fulfillment">
 <span>Fulfillment <small>7</small></span>
 </li>
 <li data-value="support">
 <span>Support <small>5</small></span>
 </li>
 </ul>
 </li>
 <li data-value="finance" aria-expanded="false">
 <span>Finance <small>8</small></span>
 <ul>
 <li data-value="accounts"><span>Accounts</span></li>
 <li data-value="payroll"><span>Payroll</span></li>
 </ul>
 </li>
 <li data-value="legal" aria-disabled="true">
 <span>Legal <small>Restricted</small></span>
 </li>
 </ul>
 <output aria-live="polite">Selected: {{ selectedNode || 'none' }}</output>
 </div>
 </body>
</html>

Installation

Install AngularCSS, load its stylesheet, and include the angular.css module in your AngularTS application. See Installation for the complete setup.