Material Next
Home Install Components Marketing hub API Roadmap Changelog

Documentation layout

Drawer footer

Theme choices and policy links shared by the app and marketing shells.

Experimental<mnw-app-shell-footer>

import 'material-next-web-components/app-shell.js';
On this page

Overview

<mnw-app-shell-footer> follows Android Insider and GitHub Dev Tools: a Theme label, Light/Dark/System icon buttons, then Privacy Policy and Code of Conduct. Place it in an app shell's navigation-footer slot. The host applies and saves the selected theme. No policy URL is assumed for another product.

<mnw-app-shell-footer
  slot="navigation-footer"
  privacy-href="https://example.com/privacy/"
  code-of-conduct-href="https://example.com/conduct/"
>
</mnw-app-shell-footer>

Listen for theme-change, apply event.detail.theme, and set footer.theme to the new choice. system follows the device preference. Both app-shell demos include a working footer; the marketing gallery connects it to its settings.

API

Drawer footer with a theme selector and optional policy links, matching the Android Insider and GitHub Dev Tools footers. The host applies the theme.

<mnw-app-shell-footer> properties
PropertyAttributeTypeDefaultDescription
themethemeAppShellTheme'system'Selected theme; the host owns persistence and colour tokens.
privacyHrefprivacy-hrefstring''Privacy policy URL; empty hides the link.
codeOfConductHrefcode-of-conduct-hrefstring''Code of conduct URL; empty hides the link.
<mnw-app-shell-footer> events
EventDescription
theme-change{theme}: the requested Light, Dark or System theme.
 mail