Material Next
Home Install Components Marketing hub API Roadmap Changelog

Components

Home view

A ready-made documentation home with an introduction, a Get started action and a built-in examples view.

Experimental<mnw-home>

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

Overview

<mnw-home> is a complete landing view for a component library's documentation: an introduction, a notice card, the headline with a tagline, and a Get started button that links to docs-href. Its second view, the examples view, shows the expressive tab bar, the app showcase and a code block with their own navigation and table of contents.

Its copy describes Material Next itself, so it suits Material Next's own pages and prototypes. For your product's landing page, compose the standalone components instead.

Live demo

The view routes itself from location.hash, so the demo runs in its own page. Open #examples inside it to see the examples view.

<mnw-home headline="Document Material Design views once" docs-href="../install/">
  <p>Optional content in the default slot appears under the home view.</p>
</mnw-home>

Routing

  • #home or no hash shows the home view.
  • #examples, or the anchor of one of its examples (#expressive-tab-bar, #app-showcase, #code-block), shows the examples view and scrolls to it.
  • The element listens to hashchange and popstate on window and pushes hash entries when its navigation is used, so use one <mnw-home> per page, and not on a page whose hash belongs to something else.

API

Home and examples app shell for material-next-web-components. It switches between a home view and an examples view from location.hash (#home, #examples or an example's anchor), so use one per page.

<mnw-home> properties
PropertyAttributeTypeDefaultDescription
docsHrefdocs-hrefstring'./install/'The URL opened by the install call-to-action button.
headlineheadlinestring'material-next-web-components'Main hero headline.
<mnw-home> slots
SlotDescription
DefaultOptional supporting content displayed below the home content.
<mnw-home> CSS custom properties
Custom propertyDescription
--mnw-home-min-heightMinimum height of the view. Default 100vh.
<mnw-home> CSS parts
PartDescription
actionThe "Get started" button, linking to docs-href.

Accessibility

  • The content area is focusable for programmatic focus after navigation, without a visible outline.
  • Its examples view uses the documentation navigation elements, which are named navigation landmarks.

Limitations

  • The introduction, notice and tagline are fixed text; only the headline and the button's link can be changed.
  • The examples view loads the app showcase's default endpoint, which needs the network.
 mail