<%- include('../_common/_head', {
  key: 'docs',
  pagetitle: 'Menu | Document'
}) %>

<%- include('../_component/docs/_header') %>

<%- include('../_component/docs/_menu') %>

<div class="uc-grid _small-col-full _nowrap">

<%- include('../_component/docs/_sidebar', {
  current: 'menu'
}) %>

  <div class="uc-grid-cell _col-fit">

  <main class="uc-content">
    <section class="uc-section">

      <h2 class="uc-section-title">Menu</h2>
      <p>You can create a menu by specifying the <code>uc-menu</code> class.</p>

      <div class="doc-component-box" id="c-1">
        <h3>1. Menu bar</h3>
        <p>You can create a menu bar by specifying the <code>_bar</code> class.</p>

        <div class="doc-component-preview">
          <div class="uc-menu _bar" id="menu">
            <div class="uc-menu-wrap">
              <div class="uc-menu-list">
                <a href="#">Menu1</a>
                <a href="#">Menu2</a>
                <a href="#">Menu3</a>
                <a href="#">Menu4</a>
                <a href="#">Menu5</a>
                <a href="#">Menu6</a>
              </div>
            </div>
          </div>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;nav class="uc-menu _bar _black" id="menu"&gt;
  &lt;div class="uc-menu-wrap"&gt;
    &lt;div class="uc-menu-list"&gt;
      &lt;a href="#"&gt;Menu1&lt;/a&gt;
      &lt;a href="#"&gt;Menu2&lt;/a&gt;
      &lt;a href="#"&gt;Menu3&lt;/a&gt;
      &lt;a href="#"&gt;Menu4&lt;/a&gt;
      &lt;a href="#"&gt;Menu5&lt;/a&gt;
      &lt;a href="#"&gt;Menu6&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;
</code></pre>
        </div>
      </div>

      <div class="doc-component-box" id="c-2">
        <h3>2. Color variations</h3>
        <p>Two kinds of color variations are available.</p>

        <div class="doc-component-preview">
          <div class="uc-menu _bar _black" id="menu">
            <div class="uc-menu-wrap">
              <div class="uc-menu-list">
                <a href="#">Menu1</a>
                <a href="#">Menu2</a>
                <a href="#">Menu3</a>
                <a href="#">Menu4</a>
                <a href="#">Menu5</a>
                <a href="#">Menu6</a>
              </div>
            </div>
          </div>
          <div>&nbsp;</div>
          <div class="uc-menu _bar _dark" id="menu">
            <div class="uc-menu-wrap">
              <div class="uc-menu-list">
                <a href="#">Menu1</a>
                <a href="#">Menu2</a>
                <a href="#">Menu3</a>
                <a href="#">Menu4</a>
                <a href="#">Menu5</a>
                <a href="#">Menu6</a>
              </div>
            </div>
          </div>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;!-- black --&gt;
&lt;nav class="uc-menu _bar _black" id="menu"&gt;
  &lt;div class="uc-menu-wrap"&gt;
    &lt;div class="uc-menu-list"&gt;
      &lt;a href="#"&gt;Menu1&lt;/a&gt;
      &lt;a href="#"&gt;Menu2&lt;/a&gt;
      &lt;a href="#"&gt;Menu3&lt;/a&gt;
      &lt;a href="#"&gt;Menu4&lt;/a&gt;
      &lt;a href="#"&gt;Menu5&lt;/a&gt;
      &lt;a href="#"&gt;Menu6&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;

&lt;!-- dark --&gt;
&lt;nav class="uc-menu _bar _dark" id="menu"&gt;
  &lt;div class="uc-menu-wrap"&gt;
    &lt;div class="uc-menu-list"&gt;
      &lt;a href="#"&gt;Menu1&lt;/a&gt;
      &lt;a href="#"&gt;Menu2&lt;/a&gt;
      &lt;a href="#"&gt;Menu3&lt;/a&gt;
      &lt;a href="#"&gt;Menu4&lt;/a&gt;
      &lt;a href="#"&gt;Menu5&lt;/a&gt;
      &lt;a href="#"&gt;Menu6&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;
</code></pre>
        </div>
      </div>

      <div class="doc-component-box" id="c-3">
        <h3>3. Slide menu</h3>
        <p>By specifying the <code>_slide</code> class, you can create slide-style menus.</p>

        <div class="doc-component-preview">
          <div class="uc-menu-btn" data-open-target="#slide-menu">
            <button><i class="uc-menu-btn-icon"></i></button>
          </div>
          <div class="uc-menu _slide" id="slide-menu">
            <div class="uc-menu-wrap">
              <div class="uc-menu-list">
                <a href="#">Menu1</a>
                <a href="#">Menu2</a>
                <a href="#">Menu3</a>
              </div>
            </div>
          </div>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;!-- A button for expanding the menu is necessary. --&gt;
&lt;div class="uc-menu-btn" data-open-target="#slide-menu"&gt;
  &lt;button&gt;&lt;i class="uc-menu-btn-icon"&gt;&lt;/i&gt;&lt;/button&gt;
&lt;/div&gt;

&lt;!-- Slide menu body --&gt;
&lt;nav class="uc-menu _slide" id="slide-menu"&gt;
  &lt;div class="uc-menu-wrap"&gt;
    &lt;div class="uc-menu-list"&gt;
      &lt;a href="#"&gt;Menu1&lt;/a&gt;
      &lt;a href="#"&gt;Menu2&lt;/a&gt;
      &lt;a href="#"&gt;Menu3&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;

&lt;!-- If you specify the `_left` class, you can also slide from the left side. --&gt;
&lt;nav class="uc-menu _slide _left" id="slide-menu"&gt;
  &lt;div class="uc-menu-wrap"&gt;
    &lt;div class="uc-menu-list"&gt;
      &lt;a href="#"&gt;Menu1&lt;/a&gt;
      &lt;a href="#"&gt;Menu2&lt;/a&gt;
      &lt;a href="#"&gt;Menu3&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;
</code></pre>
        </div>
      </div>

    </section>

    <div class="uc-pager-unit">
      <div class="uc-btn"><a href="./gird.html">← Grid</a></div>
      <div class="uc-btn _primary"><a href="./hero.html">Hero →</a></div>
    </div>
  </main>

  </div>

</div>

<%- include('../_component/_footer') %>

<%- include('../_common/_foot') %>
