@graupl/graupl 1.0.0-alpha.13 → 1.0.0-alpha.15

package/docs/components/inputgroup.md

@@ -0,0 +1,159 @@
+# Input Group
+
+Defaults
+
+```jsx
+// Input group selectors.
+$input-group-selector: ".input-group" !default;
+$input-group-inline-selector: ".inline" !default;
+$input-group-help-text-selector: ".help-text" !default;
+
+// Grid names.
+$input-group-grid-label-name: label !default;
+$input-group-grid-input-name: input !default;
+$input-group-grid-help-name: help !default;
+
+// Input group properties.
+$input-group-grid-template-columns: 100% !default;
+$input-group-grid-template-rows: auto auto auto !default;
+
+// Inline input group properties.
+$input-group-inline-grid-template-columns: auto 1fr !default;
+$input-group-inline-grid-template-rows: auto auto !default;
+
+// Inner element properties.
+$input-group-label-grid-area: $input-group-grid-label-name !default;
+$input-group-input-grid-area: $input-group-grid-input-name !default;
+$input-group-help-grid-area: $input-group-grid-help-name !default;
+```
+
+Variables
+
+Input group properties
+
+```jsx
+--#{root-defaults.$prefix}-input-group-grid-template-areas
+--#{root-defaults.$prefix}-input-group-grid-template-columns
+--#{root-defaults.$prefix}-input-group-grid-template-rows
+--#{root-defaults.$prefix}-input-group-row-gap
+--#{root-defaults.$prefix}-input-group-column-gap
+--#{root-defaults.$prefix}-input-group-gap
+```
+
+Inline input group properties
+
+```jsx
+--#{root-defaults.$prefix}-input-group-inline-grid-template-areas
+--#{root-defaults.$prefix}-input-group-inline-grid-template-columns
+--#{root-defaults.$prefix}-input-group-inline-grid-template-rows
+```
+
+Inner element properties
+
+```jsx
+--#{root-defaults.$prefix}-input-group-label-grid-area
+--#{root-defaults.$prefix}-input-group-input-grid-area
+--#{root-defaults.$prefix}-input-group-help-grid-area
+```
+
+Markup
+
+```jsx
+    <div class="py-10 full-width container">
+      <h2>Form elements</h2>
+      <p>Graupl provides default styling for all form elements.</p>
+      <form class="full-width rg-4">
+        <div class="input-group">
+          <label for="input">Input</label>
+          <input type="text" placeholder="Input" id="input">
+          <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
+        </div>
+        <div class="input-group inline"><label for="input-readonly">Readonly Input</label>
+          <input type="text" placeholder="Readonly Input" id="input-readonly" value="Readonly Input" readonly>
+          <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
+        </div>
+        <div class="input-group"><label for="input-disabled">Disabled Input</label>
+          <input type="text" placeholder="Disabled Input" id="input-disabled" disabled>
+          <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
+        </div>
+        <div class="input-group inline"><label for="textarea">Textarea</label>
+          <textarea class="textarea" placeholder="Textarea" id="textarea"></textarea>
+        </div>
+        <div class="input-group"><label for="textarea-readonly">Readonly Textarea</label>
+          <textarea class="textarea" placeholder="Readonly Textarea" id="textarea-readonly"
+            readonly>Readonly Textarea</textarea>
+        </div>
+        <div class="input-group"><label for="textarea-disabled">Disabled Textarea</label>
+          <textarea class="textarea" placeholder="Disabled Textarea" id="textarea-disabled" disabled></textarea>
+        </div>
+        <div class="input-group inline"><label for="select">Select</label>
+          <select id="select">
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <optgroup label="Group 1">
+              <option value="3">Option 3</option>
+              <option value="4">Option 4</option>
+              <option value="5">Option 5</option>
+            </optgroup>
+          </select>
+        </div>
+        <div class="input-group"><label for="select-disabled">Disabled Select</label>
+          <select id="select-disabled" disabled>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <optgroup label="Group 1">
+              <option value="3">Option 3</option>
+              <option value="4">Option 4</option>
+              <option value="5">Option 5</option>
+            </optgroup>
+          </select>
+        </div>
+        <div class="input-group"><label for"multi-select">Multi-select</label>
+          <select id="multi-select" multiple>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <optgroup label="Group 1">
+              <option value="3">Option 3</option>
+              <option value="4">Option 4</option>
+              <option value="5">Option 5</option>
+            </optgroup>
+          </select>
+        </div>
+        <div class="input-group inline"><label for="multi-select-disabled">Disabled Multi-select</label>
+          <select id="multi-select-disabled" multiple disabled>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <optgroup label="Group 1">
+              <option value="3">Option 3</option>
+              <option value="4">Option 4</option>
+              <option value="5">Option 5</option>
+            </optgroup>
+          </select>
+        </div>
+        <fieldset>
+          <legend>Checkboxes</legend>
+          <label for="checkbox">
+            <input type="checkbox" id="checkbox"> Checkbox</label>
+          <label for="checkbox-checked">
+            <input type="checkbox" id="checkbox-checked" checked> Checked Checkbox</label>
+          <label for="checkbox-disabled">
+            <input type="checkbox" id="checkbox-disabled" disabled> Disabled Checkbox</label>
+        </fieldset>
+        <fieldset>
+          <legend>Radio Buttons</legend>
+          <label for="radio"><input type="radio" id="radio" name="radio"> Radio</label>
+          <label for="radio-checked"><input type="radio" id="radio-checked" name="radio" checked> Checked Radio</label>
+          <label for="radio-disabled"><input type="radio" id="radio-disabled" name="radio" disabled> Disabled
+            Radio</label>
+        </fieldset>
+        <fieldset disabled>
+          <legend>Disabled Fieldset</legend>
+          <label for="disabled-fieldset-checkbox">
+            <input type="checkbox" id="disabled-fieldset-checkbox"> Checkbox</label>
+        </fieldset>
+        <div class="input-group"><label for="range">Range</label>
+          <input type="range" class="range" id="range">
+        </div>
+      </form>
+    </div>
+```

package/docs/components/menu.md

@@ -0,0 +1,326 @@
+# Menu
+
+Defaults
+
+```jsx
+// Menu selectors.
+$menu-selector: ".menu" !default;
+$submenu-selector: ".submenu" !default;
+$menu-item-selector: ".menu-item" !default;
+$menu-link-selector: ".menu-link" !default;
+$submenu-toggle-selector: ".submenu-toggle" !default;
+$menu-show-selector: ".show" !default;
+$menu-hide-selector: ".hide" !default;
+
+// Flex properties.
+$menu-flex-direction: row !default;
+$submenu-flex-direction: column !default;
+
+// Visibility properties.
+$menu-show-display: flex !default;
+$menu-hide-display: none !default;
+$submenu-show-display: $menu-show-display !default;
+$submenu-hide-display: $menu-hide-display !default;
+
+// Menu item properties.
+$menu-item-min-width: min-content !default;
+$menu-item-max-width: 100% !default;
+
+// Submenu properties.
+$submenu-position: absolute !default;
+$submenu-z-index: 2 !default;
+$submenu-top: 100% !default;
+$submenu-right: auto !default;
+$submenu-bottom: auto !default;
+$submenu-left: 0 !default;
+
+// Submenu item properties.
+$submenu-item-width: 100% !default;
+
+// Menu link properties.
+$menu-link-text-decoration: none !default;
+$menu-link-visited-text-decoration: $menu-link-text-decoration !default;
+$menu-link-focus-text-decoration: $menu-link-text-decoration !default;
+$menu-link-hover-text-decoration: $menu-link-text-decoration !default;
+$menu-link-active-text-decoration: $menu-link-text-decoration !default;
+$menu-link-disabled-text-decoration: $menu-link-text-decoration !default;
+$menu-link-text-decoration-style: solid !default;
+$menu-link-visited-text-decoration-style: $menu-link-text-decoration-style !default;
+$menu-link-focus-text-decoration-style: $menu-link-text-decoration-style !default;
+$menu-link-hover-text-decoration-style: $menu-link-text-decoration-style !default;
+$menu-link-active-text-decoration-style: $menu-link-text-decoration-style !default;
+$menu-link-disabled-text-decoration-style: $menu-link-text-decoration-style !default;
+$menu-link-transform: none !default;
+$menu-link-visited-transform: $menu-link-transform !default;
+$menu-link-focus-transform: $menu-link-transform !default;
+$menu-link-hover-transform: $menu-link-transform !default;
+$menu-link-active-transform: $menu-link-transform !default;
+$menu-link-disabled-transform: $menu-link-transform !default;
+$menu-border-width: 0 !default;
+$menu-link-border-width: 0 !default;
+$submenu-toggle-transform: rotate(0deg) !default;
+$submenu-toggle-open-transform: rotate(-180deg) !default;
+$submenu-toggle-content: "'▼'" !default;
+```
+
+Variables
+
+The menu properties:
+
+```scss
+--#{root-defaults.$prefix}-menu-flex-direction
+--#{root-defaults.$prefix}-menu-padding-x
+--#{root-defaults.$prefix}-menu-padding-y
+--#{root-defaults.$prefix}-menu-padding
+
+```
+
+The menu gap properties:
+
+```scss
+--#{root-defaults.$prefix}-menu-column-gap
+--#{root-defaults.$prefix}-menu-row-gap
+--#{root-defaults.$prefix}-menu-gap
+
+```
+
+The menu display properties:
+
+```scss
+--#{root-defaults.$prefix}-menu-show-display
+--#{root-defaults.$prefix}-menu-hide-display
+--#{root-defaults.$prefix}-menu-display
+
+```
+
+The menu color properties:
+
+```scss
+--#{root-defaults.$prefix}-menu-background
+--#{root-defaults.$prefix}-menu-color
+
+```
+
+The menu border properties:
+
+```scss
+--#{root-defaults.$prefix}-menu-border-color
+--#{root-defaults.$prefix}-menu-border-radius
+--#{root-defaults.$prefix}-menu-border-style
+--#{root-defaults.$prefix}-menu-border-width
+--#{root-defaults.$prefix}-menu-border
+
+```
+
+The submenu properties:
+
+```scss
+--#{root-defaults.$prefix}-submenu-flex-direction
+--#{root-defaults.$prefix}-submenu-z-index
+--#{root-defaults.$prefix}-submenu-padding-x
+--#{root-defaults.$prefix}-submenu-padding-y
+--#{root-defaults.$prefix}-submenu-padding
+
+```
+
+The submenu gap properties:
+
+```scss
+--#{root-defaults.$prefix}-submenu-column-gap
+--#{root-defaults.$prefix}-submenu-row-gap
+--#{root-defaults.$prefix}-submenu-gap
+
+```
+
+The submenu display properties:
+
+```scss
+--#{root-defaults.$prefix}-submenu-show-display
+--#{root-defaults.$prefix}-submenu-hide-display
+--#{root-defaults.$prefix}-submenu-display
+
+```
+
+The submenu color properties:
+
+```scss
+--#{root-defaults.$prefix}-submenu-background
+--#{root-defaults.$prefix}-submenu-color
+
+```
+
+The submenu border properties:
+
+```scss
+--#{root-defaults.$prefix}-submenu-border-color
+--#{root-defaults.$prefix}-submenu-border-radius
+--#{root-defaults.$prefix}-submenu-border-style
+--#{root-defaults.$prefix}-submenu-border-width
+--#{root-defaults.$prefix}-submenu-border
+
+```
+
+The submenu position properties:
+
+```scss
+--#{root-defaults.$prefix}-submenu-position
+--#{root-defaults.$prefix}-submenu-top
+--#{root-defaults.$prefix}-submenu-right
+--#{root-defaults.$prefix}-submenu-bottom
+--#{root-defaults.$prefix}-submenu-left
+--#{root-defaults.$prefix}-submenu-inset
+
+```
+
+The menu item properties:
+
+```scss
+--#{root-defaults.$prefix}-menu-item-min-width
+--#{root-defaults.$prefix}-menu-item-max-width
+--#{root-defaults.$prefix}-menu-item-padding-x
+--#{root-defaults.$prefix}-menu-item-padding-y
+--#{root-defaults.$prefix}-menu-item-padding
+
+```
+
+The submenu item properties:
+
+```scss
+--#{root-defaults.$prefix}-submenu-item-width
+
+```
+
+The menu link properties:
+
+```scss
+--#{root-defaults.$prefix}-menu-link-padding-x
+--#{root-defaults.$prefix}-menu-link-padding-y
+--#{root-defaults.$prefix}-menu-link-padding
+
+```
+
+The menu link transform properties:
+
+```scss
+--#{root-defaults.$prefix}-menu-link-transition
+--#{root-defaults.$prefix}-menu-link-transition-reduced-motion
+--#{root-defaults.$prefix}-menu-link-transform
+--#{root-defaults.$prefix}-menu-link-visited-transform
+--#{root-defaults.$prefix}-menu-link-focus-transform
+--#{root-defaults.$prefix}-menu-link-hover-transform
+--#{root-defaults.$prefix}-menu-link-active-transform
+--#{root-defaults.$prefix}-menu-link-disabled-transform
+
+```
+
+The menu link gap properties:
+
+```scss
+--#{root-defaults.$prefix}-menu-link-column-gap
+--#{root-defaults.$prefix}-menu-link-row-gap
+--#{root-defaults.$prefix}-menu-link-gap
+
+```
+
+The menu link colors:
+
+```scss
+--#{root-defaults.$prefix}-menu-link-background
+--#{root-defaults.$prefix}-menu-link-visited-background
+--#{root-defaults.$prefix}-menu-link-focus-background
+--#{root-defaults.$prefix}-menu-link-hover-background
+--#{root-defaults.$prefix}-menu-link-active-background
+--#{root-defaults.$prefix}-menu-link-disabled-background
+--#{root-defaults.$prefix}-menu-link-color
+--#{root-defaults.$prefix}-menu-link-visited-color
+--#{root-defaults.$prefix}-menu-link-focus-color
+--#{root-defaults.$prefix}-menu-link-hover-color
+--#{root-defaults.$prefix}-menu-link-active-color
+--#{root-defaults.$prefix}-menu-link-disabled-color
+
+```
+
+The menu link text decoration properties:
+
+```scss
+--#{root-defaults.$prefix}-menu-link-text-decoration
+--#{root-defaults.$prefix}-menu-link-visited-text-decoration
+--#{root-defaults.$prefix}-menu-link-focus-text-decoration
+--#{root-defaults.$prefix}-menu-link-hover-text-decoration
+--#{root-defaults.$prefix}-menu-link-active-text-decoration
+--#{root-defaults.$prefix}-menu-link-disabled-text-decoration
+--#{root-defaults.$prefix}-menu-link-text-decoration-thickness
+--#{root-defaults.$prefix}-menu-link-visited-text-decoration-thickness
+--#{root-defaults.$prefix}-menu-link-focus-text-decoration-thickness
+--#{root-defaults.$prefix}-menu-link-hover-text-decoration-thickness
+--#{root-defaults.$prefix}-menu-link-active-text-decoration-thickness
+--#{root-defaults.$prefix}-menu-link-disabled-text-decoration-thickness
+--#{root-defaults.$prefix}-menu-link-text-decoration-style
+--#{root-defaults.$prefix}-menu-link-visited-text-decoration-style
+--#{root-defaults.$prefix}-menu-link-focus-text-decoration-style
+--#{root-defaults.$prefix}-menu-link-hover-text-decoration-style
+--#{root-defaults.$prefix}-menu-link-active-text-decoration-style
+--#{root-defaults.$prefix}-menu-link-disabled-text-decoration-style
+--#{root-defaults.$prefix}-menu-link-text-decoration-color
+--#{root-defaults.$prefix}-menu-link-visited-text-decoration-color
+--#{root-defaults.$prefix}-menu-link-focus-text-decoration-color
+--#{root-defaults.$prefix}-menu-link-hover-text-decoration-color
+--#{root-defaults.$prefix}-menu-link-active-text-decoration-color
+--#{root-defaults.$prefix}-menu-link-disabled-text-decoration-color
+
+```
+
+The menu link border properties:
+
+```scss
+--#{root-defaults.$prefix}-menu-link-border-radius
+--#{root-defaults.$prefix}-menu-link-border-style
+--#{root-defaults.$prefix}-menu-link-border-width
+--#{root-defaults.$prefix}-menu-link-border
+--#{root-defaults.$prefix}-menu-link-border-color
+--#{root-defaults.$prefix}-menu-link-visited-border-color
+--#{root-defaults.$prefix}-menu-link-focus-border-color
+--#{root-defaults.$prefix}-menu-link-hover-border-color
+--#{root-defaults.$prefix}-menu-link-active-border-color
+--#{root-defaults.$prefix}-menu-link-disabled-border-color
+
+```
+
+The submenu toggle properties:
+
+```scss
+--#{root-defaults.$prefix}-submenu-toggle-transform
+--#{root-defaults.$prefix}-submenu-toggle-open-transform
+--#{root-defaults.$prefix}-submenu-toggle-content
+--#{root-defaults.$prefix}-submenu-toggle-transition
+--#{root-defaults.$prefix}-submenu-toggle-transition-reduced-motion
+
+```
+
+Markup
+
+```jsx
+    <div class="py-10 full-width container">
+        <div class="py-7">
+        <nav class="navigation" data-graupl-menu-type="DisclosureMenu" data-graupl-menu-options="{'optionalKeySupport': true}">
+          <a class="navigation-branding" href="#">Graupl</a>
+          <button class="navigation-toggle ml-auto mr-0" aria-label="Toggle navigation"></button>
+          <ul class="menu">
+            <li class="menu-item"><a class="menu-link" href="#">Home</a></li>
+            <li class="menu-item submenu-item">
+              <button class="menu-link button link submenu-toggle">About</button>
+              <ul class="submenu">
+                <li class="menu-item"><a class="menu-link" href="#">About Us</a></li>
+                <li class="menu-item"><a class="menu-link" href="#">Our Team</a></li>
+                <li class="menu-item"><a class="menu-link" href="#">Our Mission</a></li>
+              </ul>
+            </li>
+            <li class="menu-item"><a class="menu-link" href="#">Blog</a></li>
+            <li class="menu-item"><a class="menu-link" href="#">Portfolio</a></li>
+            <li class="menu-item"><a class="menu-link button tertiary" href="#">Contact</a></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    </div>
+```

package/docs/components/navigation.md

@@ -0,0 +1,158 @@
+# Navigation
+
+Default
+
+```jsx
+// Navigation selectors.
+$navigation-selector: ".navigation" !default;
+$navigation-toggle-selector: ".navigation-toggle" !default;
+$navigation-branding-selector: ".navigation-branding" !default;
+
+// Navigation toggle properties.
+$navigation-toggle-content: "'☰'" !default;
+
+// Navigation branding properties.
+$navigation-branding-text-decoration: none !default;
+$navigation-branding-visited-text-decoration: $navigation-branding-text-decoration !default;
+$navigation-branding-focus-text-decoration: $navigation-branding-text-decoration !default;
+$navigation-branding-hover-text-decoration: $navigation-branding-text-decoration !default;
+$navigation-branding-active-text-decoration: $navigation-branding-text-decoration !default;
+$navigation-branding-disabled-text-decoration: $navigation-branding-text-decoration !default;
+$navigation-branding-text-decoration-style: solid !default;
+$navigation-branding-visited-text-decoration-style: $navigation-branding-text-decoration-style !default;
+$navigation-branding-focus-text-decoration-style: $navigation-branding-text-decoration-style !default;
+$navigation-branding-hover-text-decoration-style: $navigation-branding-text-decoration-style !default;
+$navigation-branding-active-text-decoration-style: $navigation-branding-text-decoration-style !default;
+$navigation-branding-disabled-text-decoration-style: $navigation-branding-text-decoration-style !default;
+```
+
+Variables
+
+The navigation colors:
+
+```scss
+--#{root-defaults.$prefix}-navigation-background
+--#{root-defaults.$prefix}-navigation-color
+
+```
+
+The navigation toggle size:
+
+```scss
+--#{root-defaults.$prefix}-navigation-toggle-min-width
+--#{root-defaults.$prefix}-navigation-toggle-min-height
+
+```
+
+The navigation toggle spacing:
+
+```scss
+--#{root-defaults.$prefix}-navigation-toggle-padding-x
+--#{root-defaults.$prefix}-navigation-toggle-padding-y
+--#{root-defaults.$prefix}-navigation-toggle-padding
+
+```
+
+The navigation toggle colors:
+
+```scss
+--#{root-defaults.$prefix}-navigation-toggle-background
+--#{root-defaults.$prefix}-navigation-toggle-color
+--#{root-defaults.$prefix}-navigation-toggle-hover-background
+--#{root-defaults.$prefix}-navigation-toggle-hover-color
+
+```
+
+The navigation toggle border properties:
+
+```scss
+--#{root-defaults.$prefix}-navigation-toggle-border-width
+--#{root-defaults.$prefix}-navigation-toggle-border-style
+--#{root-defaults.$prefix}-navigation-toggle-border
+--#{root-defaults.$prefix}-navigation-toggle-border-color
+--#{root-defaults.$prefix}-navigation-toggle-border-radius
+
+```
+
+The navigation branding properties:
+
+```scss
+--#{root-defaults.$prefix}-navigation-branding-font-size
+--#{root-defaults.$prefix}-navigation-branding-font-weight
+--#{root-defaults.$prefix}-navigation-branding-padding-x
+--#{root-defaults.$prefix}-navigation-branding-padding-y
+--#{root-defaults.$prefix}-navigation-branding-padding
+
+```
+
+The navigation branding colors:
+
+```scss
+--#{root-defaults.$prefix}-navigation-branding-color
+--#{root-defaults.$prefix}-navigation-branding-visited-color
+--#{root-defaults.$prefix}-navigation-branding-focus-color
+--#{root-defaults.$prefix}-navigation-branding-hover-color
+--#{root-defaults.$prefix}-navigation-branding-active-color
+--#{root-defaults.$prefix}-navigation-branding-disabled-color
+
+```
+
+The navigation branding text decoration properties:
+
+```scss
+--#{root-defaults.$prefix}-navigation-branding-text-decoration
+--#{root-defaults.$prefix}-navigation-branding-visited-text-decoration
+--#{root-defaults.$prefix}-navigation-branding-focus-text-decoration
+--#{root-defaults.$prefix}-navigation-branding-hover-text-decoration
+--#{root-defaults.$prefix}-navigation-branding-active-text-decoration
+--#{root-defaults.$prefix}-navigation-branding-disabled-text-decoration
+--#{root-defaults.$prefix}-navigation-branding-text-decoration-style
+--#{root-defaults.$prefix}-navigation-branding-visited-text-decoration-style
+--#{root-defaults.$prefix}-navigation-branding-focus-text-decoration-style
+--#{root-defaults.$prefix}-navigation-branding-hover-text-decoration-style
+--#{root-defaults.$prefix}-navigation-branding-active-text-decoration-style
+--#{root-defaults.$prefix}-navigation-branding-disabled-text-decoration-style
+--#{root-defaults.$prefix}-navigation-branding-text-decoration-thickness
+--#{root-defaults.$prefix}-navigation-branding-visited-text-decoration-thickness
+--#{root-defaults.$prefix}-navigation-branding-focus-text-decoration-thickness
+--#{root-defaults.$prefix}-navigation-branding-hover-text-decoration-thickness
+--#{root-defaults.$prefix}-navigation-branding-active-text-decoration-thickness
+--#{root-defaults.$prefix}-navigation-branding-disabled-text-decoration-thickness
+--#{root-defaults.$prefix}-navigation-branding-text-decoration-color
+--#{root-defaults.$prefix}-navigation-branding-visited-text-decoration-color
+--#{root-defaults.$prefix}-navigation-branding-focus-text-decoration-color
+--#{root-defaults.$prefix}-navigation-branding-hover-text-decoration-color
+--#{root-defaults.$prefix}-navigation-branding-active-text-decoration-color
+--#{root-defaults.$prefix}-navigation-branding-disabled-text-decoration-color
+
+```
+
+The navigation toggle properties:
+
+```scss
+--#{root-defaults.$prefix}-navigation-toggle-content
+
+```
+
+Markup
+
+```jsx
+<nav class="navigation" data-graupl-menu-type="DisclosureMenu" data-graupl-menu-options="{'optionalKeySupport': true}">
+  <a class="navigation-branding" href="#">Graupl</a>
+  <button class="navigation-toggle ml-auto mr-0" aria-label="Toggle navigation"></button>
+  <ul class="menu">
+    <li class="menu-item"><a class="menu-link" href="#">Home</a></li>
+    <li class="menu-item submenu-item">
+      <button class="menu-link button link submenu-toggle">About</button>
+      <ul class="submenu">
+        <li class="menu-item"><a class="menu-link" href="#">About Us</a></li>
+        <li class="menu-item"><a class="menu-link" href="#">Our Team</a></li>
+        <li class="menu-item"><a class="menu-link" href="#">Our Mission</a></li>
+      </ul>
+    </li>
+    <li class="menu-item"><a class="menu-link" href="#">Blog</a></li>
+    <li class="menu-item"><a class="menu-link" href="#">Portfolio</a></li>
+    <li class="menu-item"><a class="menu-link button tertiary" href="#">Contact</a></li>
+  </ul>
+</nav>
+```