Material Next
Home Install Components Marketing hub API Roadmap Changelog

Marketing hub elements

Marketing top app bar

An identity-only app bar with the product icon and name.

Experimental<mnw-marketing-top-app-bar>

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

Overview

<mnw-marketing-top-app-bar> is a 64dp identity bar with the app icon and name linking home. It contains no GitHub action, context label or trailing actions. The full marketing shell uses the shared app shell instead, with a connected or closed navigation drawer, the same clean product heading and an actions slot for pages that need trailing actions.

Live demo

Only the product icon and name.
<mnw-marketing-top-app-bar
  name="Pocket Notes"
  icon="/logos/icon.svg"
  href="./"
></mnw-marketing-top-app-bar>

API

The hub's identity-only top app bar: the app icon and name. It reflects scrolled while the page is scrolled, which gives it the raised container tone.

<mnw-marketing-top-app-bar> properties
PropertyAttributeTypeDefaultDescription
namenamestring''The app's name, linked to href.
iconiconstring''URL of the app's icon, 32px; omitted when empty.
hrefhrefstring'./'Where the brand links to.
scrolledscrolledbooleanfalseRaised tone; set by the element while the window is scrolled.

scrolled follows the window's scroll position. The bar uses a raised surface once content scrolls beneath it. The brand is an accessible link; its icon is decorative.

 mail