On This Page

<mdc-on-this-page caption="On this page" headline="Navigation rail">
    <mdc-on-this-page-item href="#variants" active>Variants</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#configurations">Configurations</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#tokens-specs">Tokens & specs</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#anatomy">Anatomy</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#color">Color</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#states">States</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#measurements">Measurements</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#common-layouts">Common layouts</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#baseline-navigation-rail">Baseline navigation rail</mdc-on-this-page-item>
</mdc-on-this-page>

<mdc-on-this-page caption="Table of contents" headline="Getting Started">
    <mdc-on-this-page-item href="#installation" active>Installation</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#quick-start">Quick start</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#theming">Theming</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#framework-integration">Framework integration</mdc-on-this-page-item>
</mdc-on-this-page>

<mdc-on-this-page headline="Components Overview">
    <mdc-on-this-page-item href="#buttons" active>Buttons</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#chips">Chips</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#dialogs">Dialogs</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#navigation-rail">Navigation Rail</mdc-on-this-page-item>
</mdc-on-this-page>

<div style="display: flex; gap: 48px;">
    <mdc-on-this-page caption="indicator-fit='content'" headline="Content Width" indicator-fit="content">
        <mdc-on-this-page-item href="#short" active>Short</mdc-on-this-page-item>
        <mdc-on-this-page-item href="#longer-item-name">A Much Longer Item Name</mdc-on-this-page-item>
        <mdc-on-this-page-item href="#medium">Medium Text</mdc-on-this-page-item>
    </mdc-on-this-page>

    <mdc-on-this-page caption="indicator-fit='full'" headline="Full Width" indicator-fit="full">
        <mdc-on-this-page-item href="#short" active>Short</mdc-on-this-page-item>
        <mdc-on-this-page-item href="#longer-item-name">A Much Longer Item Name</mdc-on-this-page-item>
        <mdc-on-this-page-item href="#medium">Medium Text</mdc-on-this-page-item>
    </mdc-on-this-page>
</div>

<mdc-on-this-page caption="On this page" headline="API Documentation">
    <mdc-on-this-page-item href="#overview" level="1" active>Overview</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#architecture" level="1">Architecture</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#components" level="2">Components</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#comp-container" level="3">Container & Header</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#comp-indicator" level="3">Indicator Pill</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#indicator-bounds" level="4">Bounding Rect Sync</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#indicator-motion" level="4">Motion Curves</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#comp-item" level="3">Navigation Item</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#controllers" level="2">Controllers & Mixins</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#ctrl-scroll-spy" level="3">Scroll Spy</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#ctrl-aria" level="3">ARIA Delegation</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#properties" level="1">Properties</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#prop-indicator-fit" level="2">indicatorFit</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#prop-scroll-offset" level="2">scrollOffset</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#prop-auto-discover" level="2">autoDiscover</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#events" level="1">Events</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#event-change" level="2">change</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#event-detail" level="3">Change Event Detail</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#accessibility" level="1">Accessibility</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#a11y-keyboard" level="2">Keyboard Navigation</mdc-on-this-page-item>
    <mdc-on-this-page-item href="#a11y-screen-readers" level="2">Screen Readers</mdc-on-this-page-item>
</mdc-on-this-page>