Drawer

See: https://material.io/components/navigation-drawer

A navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.

A navigation drawer is recommended for:

• Apps with five or more top-level destinations

• Apps with two or more levels of navigation hierarchy

• Quick navigation between unrelated destinations

class materialweb.tags.drawer.Drawer(*args, **kwargs)

Provides template tag: Drawer.

Example usage:

{% load materialweb %}

{% Drawer %}
  {% Drawer_Content %}
    {% List_Item tag="a" href="#" activate=True aria-current="page" %}
      {% List_Content tag="i" type="image" aria-hidden="true" class="material-icons" %}
        inbox
      {% endList_Content %}
      {% List_Content type="text" %}Inbox{% endList_Content %}
    {% endList_Item %}

    {% List_Item tag="a" href="#" %}
      {% List_Content tag="i" type="image" aria-hidden="true" class="material-icons" %}
        send
      {% endList_Content %}
      {% List_Content type="text" %}Outgoing{% endList_Content %}
    {% endList_Item %}

    {% List_Item tag="a" href="#" %}
      {% List_Content tag="i" type="image" aria-hidden="true" class="material-icons" %}
        drafts
      {% endList_Content %}
      {% List_Content type="text" %}Drafts{% endList_Content %}
    {% endList_Item %}
  {% endDrawer_Content %}
{% endDrawer %}

Example output:

<aside class="mdc-drawer">
  <div class="mdc-drawer__content">
    <nav class="mdc-list">
      <a href="#" aria-current="page"
          class="mdc-list-item mdc-list-item--activated">
        <span class="mdc-list-item__ripple"></span>
        <i aria-hidden="true"
            class="material-icons mdc-list-item__graphic">
          inbox
        </i>
        <span class="mdc-list-item__text">Inbox</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__ripple"></span>
        <i aria-hidden="true"
            class="material-icons mdc-list-item__graphic">
          send
        </i>
        <span class="mdc-list-item__text">Outgoing</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__ripple"></span>
        <i aria-hidden="true"
            class="material-icons mdc-list-item__graphic">
          drafts
        </i>
        <span class="mdc-list-item__text">Drafts</span>
      </a>
    </nav>
  </div>
</aside>

WANT_CHILDREN = True

Template Tag needs closing end tag.

MODES = ('standard', 'modal', 'dismissible')

Available variants.

DEFAULT_TAG = 'aside'

Rendered HTML tag.

class materialweb.tags.drawer.Header(*args, **kwargs)

Provides template tag: Drawer_Header.

Example usage:

{% load materialweb %}

{% Drawer %}
  {% Drawer_Header %}
    {% Drawer_Title %}Mail{% endDrawer_Title %}
    {% Drawer_SubTitle %}email@material.io{% endDrawer_SubTitle %}
  {% endDrawer_Header %}
  {% Drawer_Content %}
    {% List_Item tag="a" href="#" %}
      {% List_Content tag="i" type="image" aria-hidden="true" class="material-icons" %}
        inbox
      {% endList_Content %}
      {% List_Content type="text" %}Inbox{% endList_Content %}
    {% endList_Item %}
  {% endDrawer_Content %}
{% endDrawer %}

Example output:

<aside class="mdc-drawer">
  <div class="mdc-drawer__header">
    <h3 class="mdc-drawer__title">Mail</h3>
    <h6 class="mdc-drawer__subtitle">email@material.io</h6>
  </div>
  <div class="mdc-drawer__content">
    <nav class="mdc-list">
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__ripple"></span>
        <i aria-hidden="true"
            class="material-icons mdc-list-item__graphic">
          inbox
        </i>
        <span class="mdc-list-item__text">Inbox</span>
      </a>
    </nav>
  </div>
</aside>

WANT_CHILDREN = True

Template Tag needs closing end tag.

class materialweb.tags.drawer.Title(*args, **kwargs)

Provides template tag: Drawer_Title.

Example usage:

{% load materialweb %}

{% Drawer_Header %}
  {% Drawer_Title %}Mail{% endDrawer_Title %}
  {% Drawer_SubTitle %}email@material.io{% endDrawer_SubTitle %}
{% endDrawer_Header %}

Example output:

<div class="mdc-drawer__header">
  <h3 class="mdc-drawer__title">Mail</h3>
  <h6 class="mdc-drawer__subtitle">email@material.io</h6>
</div>

WANT_CHILDREN = True

Template Tag needs closing end tag.

DEFAULT_TAG = 'h3'

Rendered HTML tag.

class materialweb.tags.drawer.SubTitle(*args, **kwargs)

Provides template tag: Drawer_SubTitle.

Example usage:

{% load materialweb %}

{% Drawer_Header %}
  {% Drawer_Title %}Mail{% endDrawer_Title %}
  {% Drawer_SubTitle %}email@material.io{% endDrawer_SubTitle %}
{% endDrawer_Header %}

Example output:

<div class="mdc-drawer__header">
  <h3 class="mdc-drawer__title">Mail</h3>
  <h6 class="mdc-drawer__subtitle">email@material.io</h6>
</div>

WANT_CHILDREN = True

Template Tag needs closing end tag.

DEFAULT_TAG = 'h6'

Rendered HTML tag.

class materialweb.tags.drawer.Content(*args, **kwargs)

Provides template tag: Drawer_Content.

Example usage:

{% load materialweb %}

{% Drawer_Content %}
  {% List_Item tag="a" href="#" %}
    {% List_Content tag="i" type="image" aria-hidden="true" class="material-icons" %}
      inbox
    {% endList_Content %}
    {% List_Content type="text" %}Inbox{% endList_Content %}
  {% endList_Item %}
{% endDrawer_Content %}

Example output:

<div class="mdc-drawer__content">
  <nav class="mdc-list">
    <a class="mdc-list-item" href="#">
      <span class="mdc-list-item__ripple"></span>
      <i aria-hidden="true"
          class="material-icons mdc-list-item__graphic">
        inbox
      </i>
      <span class="mdc-list-item__text">Inbox</span>
    </a>
  </nav>
</div>

WANT_CHILDREN = True

Template Tag needs closing end tag.

DEFAULT_TAG = 'nav'

Rendered HTML tag.

class materialweb.tags.drawer.AppContent(*args, **kwargs)

Provides template tag: Drawer_AppContent.

In cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.

In the following example, the mdc-drawer__content and main-content elements should scroll independently of each other. The mdc-drawer–dismissible and mdc-drawer-app-content elements should then sit side-by-side.

Example usage:

{% load materialweb %}

<body>
  {% Drawer mode="dismissible" %}
    {% Drawer_Content %}
      {% List_Item tag="a" href="#" activate=True aria-current="page" %}
        {% List_Content tag="i" type="image" aria-hidden="true" class="material-icons" %}
          inbox
        {% endList_Content %}
        {% List_Content type="text" %}Inbox{% endList_Content %}
      {% endList_Item %}

      {% List_Item tag="a" href="#" %}
        {% List_Content tag="i" type="image" aria-hidden="true" class="material-icons" %}
          send
        {% endList_Content %}
        {% List_Content type="text" %}Outgoing{% endList_Content %}
      {% endList_Item %}

      {% List_Item tag="a" href="#" %}
        {% List_Content tag="i" type="image" aria-hidden="true" class="material-icons" %}
          drafts
        {% endList_Content %}
        {% List_Content type="text" %}Drafts{% endList_Content %}
      {% endList_Item %}
    {% endDrawer_Content %}
  {% endDrawer %}

  {% Drawer_AppContent %}
    {% TopAppBar %}
      {% TopAppBar_Left %}
        {% TopAppBar_Menu class="material-icons" %}
          menu
        {% endTopAppBar_Menu %}

        {% TopAppBar_Title %}
          Dismissible Drawer
        {% endTopAppBar_Title %}
      {% endTopAppBar_Left %}
    {% endTopAppBar %}

    <main id="main-content" class="main-content">
      <div class="mdc-top-app-bar--fixed-adjust">
        App Content
      </div>
    </main>
  {% endDrawer_AppContent %}

</body>

Example output:

<body>
  <aside class="mdc-drawer mdc-drawer--dismissible">
    <div class="mdc-drawer__content">
      <div class="mdc-list">
        <a href="#" aria-current="page"
            class="mdc-list-item mdc-list-item--activated">
          <span class="mdc-list-item__ripple"></span>
          <i aria-hidden="true"
              class="material-icons mdc-list-item__graphic">
            inbox
          </i>
          <span class="mdc-list-item__text">Inbox</span>
        </a>
        <a class="mdc-list-item" href="#">
          <span class="mdc-list-item__ripple"></span>
          <i aria-hidden="true"
              class="material-icons mdc-list-item__graphic">
            send
          </i>
          <span class="mdc-list-item__text">Outgoing</span>
        </a>
        <a class="mdc-list-item" href="#">
          <span class="mdc-list-item__ripple"></span>
          <i aria-hidden="true"
              class="material-icons mdc-list-item__graphic">
            drafts
          </i>
          <span class="mdc-list-item__text">Drafts</span>
        </a>
      </div>
    </div>
  </aside>

  <div class="mdc-drawer-app-content">
    <header class="mdc-top-app-bar app-bar" id="app-bar">
      <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
          <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">
            menu
          </button>
          <span class="mdc-top-app-bar__title">Dismissible Drawer</span>
        </section>
      </div>
    </header>

    <main class="main-content" id="main-content">
      <div class="mdc-top-app-bar--fixed-adjust">
        App Content
      </div>
    </main>
  </div>
</body>

WANT_CHILDREN = True

Template Tag needs closing end tag.