drawer
Bottom anchored drawer panels
Drawers are native modal dialogs with CSS edge placement and optional handle, header, scroll body, and footer. AngularTS owns values and actions inside them.
<section class="drawer">
<button commandfor="goal-drawer" command="show-modal">Open Drawer</button>
<dialog id="goal-drawer" side="bottom">
<h2>Move Goal</h2>
<p>Set your daily activity goal.</p>
<button commandfor="goal-drawer" command="close">Cancel</button>
</dialog>
</section>
Activity Goal
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 Drawer</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="goal=350; submittedGoal=350"
data-example="drawer-demo"
>
<main class="visual-example">
<section id="goal-drawer" class="drawer">
<button
commandfor="goal-drawer-content"
command="show-modal"
variant="outline"
>
Open Drawer
</button>
<dialog
id="goal-drawer-content"
closedby="any"
aria-labelledby="goal-drawer-title"
aria-describedby="goal-drawer-description"
side="bottom"
>
<article>
<header>
<h2 id="goal-drawer-title">Move Goal</h2>
<p id="goal-drawer-description">Set your daily activity goal.</p>
</header>
<section>
<menu>
<button
variant="outline"
size="icon-sm"
aria-label="Decrease"
ng-disabled="goal <= 200"
ng-click="goal=goal-10"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="M5 12h14"></path>
</svg>
</button>
<output>
<strong ng-bind="goal"></strong>
<span>Calories/day</span>
</output>
<button
variant="outline"
size="icon-sm"
aria-label="Increase"
ng-disabled="goal>= 400"
ng-click="goal=goal+10"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="M12 5v14"></path>
<path d="M5 12h14"></path>
</svg>
</button>
</menu>
<figure aria-hidden="true">
<span style="--height: 80%"></span
><span style="--height: 60%"></span>
<span style="--height: 40%"></span
><span style="--height: 60%"></span>
<span style="--height: 40%"></span
><span style="--height: 56%"></span>
<span style="--height: 38%"></span
><span style="--height: 48%"></span>
<span style="--height: 60%"></span
><span style="--height: 40%"></span>
<span style="--height: 56%"></span
><span style="--height: 38%"></span>
<span style="--height: 70%"></span>
</figure>
</section>
<footer>
<button
commandfor="goal-drawer-content"
command="close"
ng-click="submittedGoal=goal"
>
Submit
</button>
<button
commandfor="goal-drawer-content"
command="close"
variant="outline"
>
Cancel
</button>
</footer>
</article>
</dialog>
</section>
<output class="drawer-output" aria-live="polite">
Submitted goal: <span ng-bind="submittedGoal"></span>
</output>
</main>
</body>
</html>
Responsive Dialog
The application chooses Dialog on desktop and Drawer on compact viewports while sharing the same AngularTS form model.
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Drawer Dialog</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="profile={email:'team@angularcss.dev',username:'@angularcss'}"
data-example="drawer-dialog"
>
<main class="drawer-dialog-demo visual-example">
<div class="drawer-dialog-desktop">
<section id="responsive-profile-dialog" class="dialog">
<button
variant="outline"
type="button"
commandfor="responsive-profile-dialog-content"
command="show-modal"
>
Edit Profile
</button>
<dialog
class="drawer-profile-dialog"
id="responsive-profile-dialog-content"
closedby="any"
aria-labelledby="responsive-profile-dialog-title"
aria-describedby="responsive-profile-dialog-description"
>
<header>
<h2 id="responsive-profile-dialog-title">Edit profile</h2>
<p id="responsive-profile-dialog-description">
Make changes to your profile here. Click save when you're done.
</p>
</header>
<form class="drawer-profile-form">
<div class="drawer-profile-field">
<label for="desktop-email">Email</label>
<input
id="desktop-email"
type="email"
ng-model="profile.email"
/>
</div>
<div class="drawer-profile-field">
<label for="desktop-username">Username</label>
<input id="desktop-username" ng-model="profile.username" />
</div>
<button
type="button"
commandfor="responsive-profile-dialog-content"
command="close"
>
Save changes
</button>
</form>
</dialog>
</section>
</div>
<div class="drawer-dialog-mobile">
<section id="responsive-profile-drawer" class="drawer">
<button
variant="outline"
type="button"
commandfor="responsive-profile-drawer-content"
command="show-modal"
>
Edit Profile
</button>
<dialog
id="responsive-profile-drawer-content"
closedby="any"
aria-labelledby="responsive-profile-drawer-title"
aria-describedby="responsive-profile-drawer-description"
side="bottom"
>
<header>
<h2 id="responsive-profile-drawer-title">Edit profile</h2>
<p id="responsive-profile-drawer-description">
Make changes to your profile here. Click save when you're done.
</p>
</header>
<form class="drawer-profile-form drawer-profile-mobile">
<div class="drawer-profile-field">
<label for="mobile-email">Email</label>
<input
id="mobile-email"
type="email"
ng-model="profile.email"
/>
</div>
<div class="drawer-profile-field">
<label for="mobile-username">Username</label>
<input id="mobile-username" ng-model="profile.username" />
</div>
<button
type="button"
commandfor="responsive-profile-drawer-content"
command="close"
>
Save changes
</button>
</form>
<footer>
<button
variant="outline"
commandfor="responsive-profile-drawer-content"
command="close"
>
Cancel
</button>
</footer>
</dialog>
</section>
</div>
</main>
</body>
</html>
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 Drawer Sides</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="paragraphs=[1,2,3,4,5,6,7,8,9,10]"
data-example="drawer-sides"
>
<main class="drawer-sides-demo visual-example">
<section side="top" class="drawer">
<button
variant="outline"
type="button"
commandfor="drawer-native-627-content"
command="show-modal"
>
Top
</button>
<dialog
size="half"
id="drawer-native-627-content"
closedby="any"
aria-labelledby="drawer-native-627-title"
aria-describedby="drawer-native-627-description"
side="top"
>
<header>
<h2 id="drawer-native-627-title">Top drawer</h2>
<p id="drawer-native-627-description">
Review activity from the top edge.
</p>
</header>
<section class="drawer-side-copy">
<p ng-repeat="item in paragraphs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</p>
</section>
<footer>
<button
variant="outline"
commandfor="drawer-native-627-content"
command="close"
>
Cancel
</button>
</footer>
</dialog>
</section>
<section side="right" class="drawer">
<button
variant="outline"
type="button"
commandfor="drawer-native-1891-content"
command="show-modal"
>
Right
</button>
<dialog
id="drawer-native-1891-content"
closedby="any"
aria-labelledby="drawer-native-1891-title"
aria-describedby="drawer-native-1891-description"
side="right"
>
<header>
<h2 id="drawer-native-1891-title">Right drawer</h2>
<p id="drawer-native-1891-description">
Review activity from the right edge.
</p>
</header>
<section class="drawer-side-copy">
<p ng-repeat="item in paragraphs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</p>
</section>
<footer>
<button
variant="outline"
commandfor="drawer-native-1891-content"
command="close"
>
Cancel
</button>
</footer>
</dialog>
</section>
<section side="bottom" class="drawer">
<button
variant="outline"
type="button"
commandfor="drawer-native-3155-content"
command="show-modal"
>
Bottom
</button>
<dialog
size="half"
id="drawer-native-3155-content"
closedby="any"
aria-labelledby="drawer-native-3155-title"
aria-describedby="drawer-native-3155-description"
side="bottom"
>
<header>
<h2 id="drawer-native-3155-title">Bottom drawer</h2>
<p id="drawer-native-3155-description">
Review activity from the bottom edge.
</p>
</header>
<section class="drawer-side-copy">
<p ng-repeat="item in paragraphs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</p>
</section>
<footer>
<button
variant="outline"
commandfor="drawer-native-3155-content"
command="close"
>
Cancel
</button>
</footer>
</dialog>
</section>
<section side="left" class="drawer">
<button
variant="outline"
type="button"
commandfor="drawer-native-4485-content"
command="show-modal"
>
Left
</button>
<dialog
id="drawer-native-4485-content"
closedby="any"
aria-labelledby="drawer-native-4485-title"
aria-describedby="drawer-native-4485-description"
side="left"
>
<header>
<h2 id="drawer-native-4485-title">Left drawer</h2>
<p id="drawer-native-4485-description">
Review activity from the left edge.
</p>
</header>
<section class="drawer-side-copy">
<p ng-repeat="item in paragraphs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</p>
</section>
<footer>
<button
variant="outline"
commandfor="drawer-native-4485-content"
command="close"
>
Cancel
</button>
</footer>
</dialog>
</section>
</main>
</body>
</html>
Scrollable Content
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Drawer Scrollable</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="paragraphs=[1,2,3,4,5,6,7,8,9,10]"
data-example="drawer-scrollable-content"
>
<main class="drawer-scroll-demo visual-example">
<section id="scrollable-drawer" side="right" class="drawer">
<button
variant="outline"
type="button"
commandfor="scrollable-drawer-content"
command="show-modal"
>
Scrollable Content
</button>
<dialog
id="scrollable-drawer-content"
closedby="any"
aria-labelledby="scrollable-drawer-title"
aria-describedby="scrollable-drawer-description"
side="right"
>
<header>
<h2 id="scrollable-drawer-title">Move Goal</h2>
<p id="scrollable-drawer-description">
Set your daily activity goal.
</p>
</header>
<section class="drawer-scroll-copy">
<p ng-repeat="item in paragraphs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</p>
</section>
<footer>
<button>Submit</button>
<button
variant="outline"
commandfor="scrollable-drawer-content"
command="close"
>
Cancel
</button>
</footer>
</dialog>
</section>
</main>
</body>
</html>
Right To Left
View source
<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Drawer Rtl</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="goal=350"
data-example="drawer-rtl"
>
<main class="visual-example">
<section id="rtl-goal-drawer" class="drawer">
<button
variant="outline"
type="button"
commandfor="rtl-goal-drawer-content"
command="show-modal"
>
فتح الدرج
</button>
<dialog
id="rtl-goal-drawer-content"
closedby="any"
aria-labelledby="rtl-goal-drawer-title"
aria-describedby="rtl-goal-drawer-description"
side="bottom"
>
<article>
<header>
<h2 id="rtl-goal-drawer-title">نقل الهدف</h2>
<p id="rtl-goal-drawer-description">حدد هدف نشاطك اليومي.</p>
</header>
<section>
<menu>
<button
variant="outline"
size="icon-sm"
aria-label="تقليل"
ng-click="goal=goal-10"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="M5 12h14"></path>
</svg>
</button>
<output>
<strong ng-bind="goal"></strong>
<span>سعرات حرارية/يوم</span>
</output>
<button
variant="outline"
size="icon-sm"
aria-label="زيادة"
ng-click="goal=goal+10"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="M12 5v14"></path>
<path d="M5 12h14"></path>
</svg>
</button>
</menu>
<figure aria-hidden="true">
<span style="--height: 80%"></span
><span style="--height: 60%"></span>
<span style="--height: 40%"></span
><span style="--height: 60%"></span>
<span style="--height: 40%"></span
><span style="--height: 56%"></span>
<span style="--height: 38%"></span
><span style="--height: 48%"></span>
<span style="--height: 60%"></span
><span style="--height: 40%"></span>
<span style="--height: 56%"></span
><span style="--height: 38%"></span>
<span style="--height: 70%"></span>
</figure>
</section>
<footer>
<button>إرسال</button>
<button
variant="outline"
commandfor="rtl-goal-drawer-content"
command="close"
>
إلغاء
</button>
</footer>
</article>
</dialog>
</section>
</main>
</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. A native dialog placed at a viewport edge.
Anatomy
Root styling selector
.drawer
Semantic structure
Use .drawer as a wrapper containing a native invoker button and dialog with authored side. Close controls use command=close; the bottom handle is generated by CSS and no anatomy classes are required.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
dir | Authored | Text and interaction direction: ltr or rtl. |
side | Authored | Dialog edge: top, right, bottom, or left. |
size | Authored | Use half for a half-height top or bottom drawer. |
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
A native dialog owns modal disclosure, focus, Escape, background isolation, and restoration. The concise authored side attribute selects CSS edge placement. AngularTS remains responsible for form models, goal values, validation, submission, responsive application composition, and authored content.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Use a visible title and description connected to the native dialog. Keep the physical edge as presentation only; content order, focus order, and inherited text direction remain semantic.
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.