Navigation Menu

1<mo-navigation-menu>2  <nav data-navigation-menu aria-label="Main">3  <ul>4    <li>5      <button type="button" popovertarget="nm-intro" aria-expanded="false">6        Getting started7        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>8      </button>9      <div popover id="nm-intro" class="popover" data-width="md">10        <ul>11          <li>12            <a href="#">13              <div data-title>Introduction</div>14              <div data-description>Re-usable components built with semantic HTML, modern CSS and vanilla JS.</div>15            </a>16          </li>17          <li>18            <a href="#">19              <div data-title>Installation</div>20              <div data-description>How to add Mò to your app and structure your markup.</div>21            </a>22          </li>23          <li>24            <a href="#">25              <div data-title>Typography</div>26              <div data-description>Styles for headings, paragraphs, lists and more.</div>27            </a>28          </li>29        </ul>30      </div>31    </li>32    <li>33      <button type="button" popovertarget="nm-components" aria-expanded="false">34        Components35        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>36      </button>37      <div popover id="nm-components" class="popover" data-width="lg">38        <ul data-columns="2">39          <li>40            <a href="#">41              <div data-title>Alert Dialog</div>42              <div data-description>A modal dialog that interrupts the user with important content.</div>43            </a>44          </li>45          <li>46            <a href="#">47              <div data-title>Hover Card</div>48              <div data-description>For sighted users to preview content available behind a link.</div>49            </a>50          </li>51          <li>52            <a href="#">53              <div data-title>Progress</div>54              <div data-description>Displays an indicator showing completion progress.</div>55            </a>56          </li>57          <li>58            <a href="#">59              <div data-title>Scroll-area</div>60              <div data-description>Visually or semantically separates scrollable content.</div>61            </a>62          </li>63          <li>64            <a href="#">65              <div data-title>Tabs</div>66              <div data-description>A set of layered sections of content displayed one at a time.</div>67            </a>68          </li>69          <li>70            <a href="#">71              <div data-title>Tooltip</div>72              <div data-description>A popup that displays information related to an element.</div>73            </a>74          </li>75        </ul>76      </div>77    </li>78    <li>79      <button type="button" popovertarget="nm-status" aria-expanded="false">80        Status81        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>82      </button>83      <div popover id="nm-status" class="popover" data-width="sm">84        <ul>85          <li><a href="#" data-inline>86            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /></svg>87            Backlog88          </a></li>89          <li><a href="#" data-inline>90            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="1" /></svg>91            In progress92          </a></li>93          <li><a href="#" data-inline>94            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>95            Done96          </a></li>97        </ul>98      </div>99    </li>100    <li>101      <a href="#" data-navigation-link aria-current="page">Docs</a>102    </li>103  </ul>104  </nav>105</mo-navigation-menu>106 

1<mo-navigation-menu>2  <nav data-navigation-menu aria-label="Site">3    <ul>4      <li><a href="#" data-navigation-link>Home</a></li>5      <li><a href="#" data-navigation-link aria-current="page">Components</a></li>6      <li><a href="#" data-navigation-link>Docs</a></li>7      <li><a href="#" data-navigation-link>Blog</a></li>8      <li><a href="#" data-navigation-link>About</a></li>9    </ul>10  </nav>11</mo-navigation-menu>