application-shell
Compose a persistent application header, the existing Sidebar, and a semantic
main workspace. Routing, permissions, and page content remain application-owned.
The reference uses the Sidebar’s responsive attribute so navigation starts
off-canvas on narrow screens without adding an application-specific class.
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 Application Shell</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="application-shell-demo">
<section class="application-shell">
<header>
<button
size="icon-sm"
variant="ghost"
aria-label="Toggle navigation"
aria-controls="enterprise-navigation"
>
☰
</button>
<a href="#workspace">Northstar Operations</a>
<menu>
<button size="sm" variant="outline">Help</button>
<button size="icon-sm" variant="ghost" aria-label="Account">
AL
</button>
</menu>
</header>
<aside
id="enterprise-navigation"
ng-sidebar
collapsible="offcanvas"
responsive
aria-label="Primary navigation"
>
<div>
<nav>
<section>
<h2>Workspace</h2>
<ul>
<li>
<a href="#overview" aria-current="page"
><span>Overview</span></a
>
</li>
<li>
<a href="#customers"><span>Customers</span></a>
</li>
<li>
<a href="#orders"><span>Orders</span></a>
</li>
</ul>
</section>
</nav>
</div>
</aside>
<main id="workspace">
<article class="card">
<header>
<h1>Operations overview</h1>
<p>Review current work and open exceptions.</p>
</header>
<section>All systems are operating normally.</section>
</article>
</main>
</section>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Application header, navigation, and workspace composition.
Anatomy
Root styling selector
.application-shell
Semantic structure
Use one .application-shell containing a direct semantic header, an existing Sidebar, and a direct main landmark. Existing components keep their own root selectors; no shell part classes are required.
API
Attributes and state
This component has no directive-specific attributes beyond its semantic HTML.
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
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
Application Shell composes a semantic header, Sidebar, and main landmark. Routing, session state, permissions, responsive navigation policy, and page content remain application-owned.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Prefer semantic landmarks and native elements inside the layout. Any interactive handles or triggers must retain an accessible name and visible focus indicator.
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 semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; 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.