Bulma Navigation (horizontal) Components (133)

Navigation (horizontal) from Flaro

<section x-data="{ mobileNavOpen: false }">
    <nav class="navbar py-5 is-white">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item" href="#">
                    <img src="flaro-assets/logos/flaro-logo-black.svg" alt="" style="height: 32px;">
                  </a>
                  <button class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                  </button>
            </div>
            <div class="navbar-menu">
                <div class="navbar-end">
                    <ul class="navbar-item">
                        <li><a class="navbar-item" href="#">Features</a></li>
                        <li><a class="navbar-item" href="#">Solutions</a></li>
                        <li><a class="navbar-item" href="#">Resources</a></li>
                        <li><a class="navbar-item" href="#">Pricing</a></li>
                    </ul>
                    <div class="navbar-item is-hidden-mobile"><a class="button is-link" href="#">Try 14 Days Free Trial</a></div>
                </div>
            </div>
        </div>
    </nav>
    <div :class="{ 'is-block': mobileNavOpen, 'is-hidden': !mobileNavOpen }" class="is-hidden navbar-side is-fixed is-inset-0" style="width: 75%; z-index: 9999; height: 100%;">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="has-background-dark is-fixed is-inset-0" style="opacity: 75%; z-index: 50;"></div>
        <aside class="menu is-relative is-flex is-flex-direction-column p-6 has-background-white" style="width: 100%; height: 100%; z-index: 50; overflow-y: auto;">
            <div class="is-flex is-align-items-center mb-10">
                <a class="mr-auto mb-0" href="#">
                    <span class="navbar-item">
                      <img src="flaro-assets/logos/flaro-logo-black.svg" alt="" style="height: 28px;" width="auto">
                    </span>
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button is-text p-0 mb-2" type="button" aria-label="Close">
                    <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <ul class="menu-list is-size-7">
                <li class="mb-2"><a class="has-background-white has-text-dark is-size-5" href="#">Features</a></li>
                <li class="mb-2"><a class="has-background-white has-text-dark is-size-5" href="#">Solutions</a></li>
                <li class="mb-2"><a class="has-background-white has-text-dark is-size-5" href="#">Resources</a></li>
                <li class="mb-2"><a class="has-background-white has-text-dark is-size-5" href="#">Pricing</a></li>
            </ul>
            <div class="mt-auto">
                <div class="py-6"><a class="button is-link is-fullwidth" href="#">Try 14 Days Free Trial</a></div>
                <p class="mb-4 has-text-centered has-text-grey-dark">
                  <span>© 2021 All rights reserved.</span>
                </p>
            </div>
        </aside>
    </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Navigation (horizontal) from Zeus

Bulma

Zeus

<section>
  <nav class="navbar py-5">
    <div class="container px-8-mobile">
      <div class="navbar-brand">
        <a class="navbar-item pl-3-desktop" href="#">
          <span class="navbar-item px-0 title is-5 has-text-dark">
            <img src="zeus-assets/logo/logo-zeus-red.svg" alt="" style="height: 28px;" width="auto">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <ul class="navbar-item">
            <li><a class="navbar-item" href="#">About</a></li>
            <li><a class="navbar-item" href="#">Company</a></li>
            <li><a class="navbar-item" href="#">Services</a></li>
            <li><a class="navbar-item" href="#">Testimonials</a></li>
          </ul>
          <div class="navbar-item is-hidden-mobile pr-3-desktop"><a class="button is-primary" href="#">Contact Us</a></div>
        </div>
      </div>
    </div>
  </nav>
  <div class="is-hidden navbar-side is-fixed is-top-0 is-bottom-0 is-left-0 has-mw-md" style="width: 75%; z-index: 9999;">
    <div class="navbar-backdrop is-fixed is-inset-0 has-background-dark" style="opacity: 75%; z-index: 50;"></div>
    <aside class="menu is-relative is-flex is-flex-direction-column py-6 px-6 has-background-white" style="width: 100%; height: 100%; z-index: 50; overflow-y: auto;">
      <div class="is-flex is-align-items-center mb-10">
        <a class="mr-auto mb-0" href="#">
          <span class="navbar-item px-0 title is-5 has-text-dark">
            <img src="zeus-assets/logo/logo-zeus-red.svg" alt="" style="height: 28px;" width="auto">
          </span>
        </a>
        <button class="navbar-close button is-text p-0 mb-2" type="button" aria-label="Close">
          <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <ul class="menu-list is-size-7">
        <li class="mb-2"><a href="#">About</a></li>
        <li class="mb-2"><a href="#">Company</a></li>
        <li class="mb-2"><a href="#">Services</a></li>
        <li class="mb-2"><a href="#">Testimonials</a></li>
      </ul>
      <div class="mt-auto">
        <div class="py-6"><a class="button is-primary is-fullwidth" href="#">Contact Us</a></div>
        <p class="mb-4 has-text-centered has-text-grey-dark">
          <span>&copy; 2021 All rights reserved.</span>
        </p>
      </div>
    </aside>
  </div>
</section>

Navigation (horizontal) from Artemis Dashboard

Bulma

Artemis Dashboard

<section class="mb-0" x-data="{ mobileNavOpen: false }">
  <nav class="navbar has-background-dark is-align-items-center">
    <div class="navbar-brand is-align-items-center">
      <a class="navbar-item" href="#">
        <img class="image" src="artemis-assets/logos/artemis-logo.svg" alt="alt" width="auto">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-burger navbar-menu-open has-text-white" role="button" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </button>
    </div>
    <div class="navbar-menu ml-5">
      <div class="navbar-start">
        <a class="navbar-item mr-3 is-flex is-align-items-center has-text-white" href="#">
          <svg class="mr-2 has-text-grey-dark" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.9066 3.12886C14.9005 3.12235 14.8987 3.1137 14.8923 3.10734C14.8859 3.10098 14.8771 3.09905 14.8706 3.0929C13.3119 1.53919 11.2008 0.666748 8.99996 0.666748C6.79914 0.666748 4.68807 1.53919 3.12935 3.0929C3.12279 3.09905 3.11404 3.10093 3.10763 3.10734C3.10122 3.11375 3.09944 3.12234 3.09334 3.12886C1.93189 4.29587 1.14217 5.7808 0.823851 7.39621C0.505534 9.01163 0.672885 10.6851 1.30478 12.2055C1.93668 13.7259 3.00481 15.0251 4.37435 15.939C5.7439 16.8529 7.35348 17.3406 8.99996 17.3406C10.6464 17.3406 12.256 16.8529 13.6256 15.939C14.9951 15.0251 16.0632 13.7259 16.6951 12.2055C17.327 10.6851 17.4944 9.01163 17.1761 7.39621C16.8578 5.7808 16.068 4.29587 14.9066 3.12886ZM8.99992 15.6667C8.00181 15.6664 7.01656 15.4415 6.11714 15.0088C5.21773 14.576 4.42719 13.9465 3.80409 13.1667H7.15015C7.38188 13.4287 7.66662 13.6385 7.98551 13.7821C8.3044 13.9258 8.65017 14.0001 8.99992 14.0001C9.34968 14.0001 9.69544 13.9258 10.0143 13.7821C10.3332 13.6385 10.618 13.4287 10.8497 13.1667H14.1958C13.5727 13.9465 12.7821 14.576 11.8827 15.0088C10.9833 15.4416 9.99804 15.6664 8.99992 15.6667ZM8.16659 11.5001C8.16659 11.3353 8.21546 11.1741 8.30703 11.0371C8.3986 10.9001 8.52875 10.7933 8.68102 10.7302C8.83329 10.6671 9.00085 10.6506 9.1625 10.6828C9.32415 10.7149 9.47263 10.7943 9.58918 10.9108C9.70572 11.0274 9.78509 11.1759 9.81724 11.3375C9.8494 11.4992 9.83289 11.6667 9.76982 11.819C9.70675 11.9713 9.59994 12.1014 9.4629 12.193C9.32586 12.2845 9.16474 12.3334 8.99992 12.3334C8.77898 12.3332 8.56714 12.2453 8.41091 12.0891C8.25468 11.9329 8.16681 11.721 8.16659 11.5001ZM15.1751 11.5018L15.1665 11.5001H11.4999C11.4983 10.9848 11.3373 10.4826 11.0389 10.0624C10.7405 9.64231 10.3193 9.32485 9.83325 9.15364V6.50008C9.83325 6.27907 9.74546 6.06711 9.58918 5.91083C9.4329 5.75455 9.22093 5.66675 8.99992 5.66675C8.77891 5.66675 8.56695 5.75455 8.41067 5.91083C8.25439 6.06711 8.16659 6.27907 8.16659 6.50008V9.15364C7.68054 9.32485 7.25939 9.64231 6.96098 10.0624C6.66256 10.4826 6.50151 10.9848 6.49992 11.5001H2.83334L2.82474 11.5018C2.60799 10.967 2.46221 10.4061 2.39114 9.83341H3.16659C3.3876 9.83341 3.59956 9.74562 3.75584 9.58934C3.91212 9.43306 3.99992 9.2211 3.99992 9.00008C3.99992 8.77907 3.91212 8.56711 3.75584 8.41083C3.59956 8.25455 3.3876 8.16675 3.16659 8.16675H2.39114C2.54005 6.98222 3.00621 5.85993 3.74037 4.91851L4.28597 5.46411C4.36335 5.54149 4.4552 5.60286 4.5563 5.64474C4.65739 5.68661 4.76574 5.70816 4.87517 5.70816C4.98459 5.70816 5.09294 5.68661 5.19404 5.64474C5.29513 5.60286 5.38699 5.54148 5.46436 5.46411C5.54173 5.38674 5.60311 5.29488 5.64498 5.19379C5.68686 5.09269 5.70841 4.98434 5.70841 4.87492C5.70841 4.76549 5.68686 4.65714 5.64498 4.55605C5.60311 4.45495 5.54173 4.3631 5.46435 4.28572L4.91881 3.74017C5.86016 3.00626 6.98227 2.54022 8.16659 2.3913V3.16675C8.16659 3.38776 8.25439 3.59972 8.41067 3.756C8.56695 3.91228 8.77891 4.00008 8.99992 4.00008C9.22093 4.00008 9.4329 3.91228 9.58918 3.756C9.74546 3.59972 9.83325 3.38776 9.83325 3.16675V2.3913C11.0176 2.54022 12.1397 3.00626 13.081 3.74017L12.5355 4.28572C12.3792 4.44199 12.2914 4.65393 12.2914 4.87492C12.2914 5.09591 12.3792 5.30785 12.5355 5.46411C12.6917 5.62037 12.9037 5.70816 13.1247 5.70816C13.3457 5.70816 13.5576 5.62038 13.7139 5.46411L14.2595 4.91851C14.9936 5.85993 15.4598 6.98222 15.6087 8.16675H14.8333C14.6122 8.16675 14.4003 8.25455 14.244 8.41083C14.0877 8.56711 13.9999 8.77907 13.9999 9.00008C13.9999 9.2211 14.0877 9.43306 14.244 9.58934C14.4003 9.74562 14.6122 9.83341 14.8333 9.83341H15.6087C15.5376 10.4061 15.3919 10.967 15.1751 11.5018Z" fill="currentColor"></path>
          </svg>
          <span class="is-size-6">Dashboard</span>
        </a>
        <a class="navbar-item mr-3 is-flex is-align-items-center has-text-white" href="#">
          <svg class="mr-2 has-text-grey-dark" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.00017 0.666748C4.41684 0.666748 0.66684 4.41675 0.66684 9.00008C0.66684 13.5834 4.41684 17.3334 9.00017 17.3334C13.5835 17.3334 17.3335 13.5834 17.3335 9.00008C17.3335 4.41675 13.5835 0.666748 9.00017 0.666748ZM2.58351 10.6667C2.41684 10.0834 2.33351 9.58342 2.33351 9.00008C2.33351 8.41675 2.41684 7.91675 2.58351 7.33342H4.16684C4.00017 8.41675 4.00017 9.58342 4.16684 10.6667H2.58351ZM3.25017 12.3334H4.41684C4.58351 13.0834 4.83351 13.8334 5.25017 14.5001C4.41684 13.9167 3.75017 13.1667 3.25017 12.3334ZM4.41684 5.66675H3.25017C3.75017 4.83342 4.41684 4.08342 5.25017 3.50008C4.83351 4.16675 4.58351 4.91675 4.41684 5.66675ZM8.16684 15.4167C7.16684 14.6667 6.41684 13.5834 6.16684 12.3334H8.16684V15.4167ZM8.16684 10.6667H5.75017C5.66684 10.0834 5.66684 9.58342 5.66684 9.00008C5.66684 8.41675 5.66684 7.91675 5.75017 7.33342H8.16684V10.6667ZM8.16684 5.66675H6.16684C6.41684 4.41675 7.16684 3.33342 8.16684 2.58341V5.66675ZM14.7502 5.66675H13.5835C13.4168 4.91675 13.1668 4.16675 12.7502 3.50008C13.5835 4.08342 14.2502 4.83342 14.7502 5.66675ZM9.83351 2.58341C10.8335 3.33342 11.5835 4.41675 11.8335 5.66675H9.83351V2.58341ZM9.83351 15.4167V12.3334H11.8335C11.5835 13.5834 10.8335 14.6667 9.83351 15.4167ZM12.2502 10.6667H9.83351V7.33342H12.2502C12.3335 8.41675 12.3335 9.58342 12.2502 10.6667ZM12.8335 14.5001C13.1668 13.8334 13.4168 13.0834 13.6668 12.3334H14.8335C14.2502 13.1667 13.5835 13.9167 12.8335 14.5001ZM13.9168 10.6667C14.0835 9.58342 14.0835 8.41675 13.9168 7.33342H15.5002C15.8335 8.41675 15.8335 9.58342 15.5002 10.6667H13.9168Z" fill="currentColor"></path>
          </svg>
          <span class="is-size-6">Discover</span>
        </a>
        <a class="navbar-item mr-3 is-flex is-align-items-center has-text-white" href="#">
          <svg class="mr-2 has-text-grey-dark" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.3414 9.23341C11.8688 8.66695 12.166 7.92406 12.1747 7.15008C12.1747 6.31465 11.8428 5.51343 11.2521 4.9227C10.6613 4.33196 9.86012 4.00008 9.02468 4.00008C8.18925 4.00008 7.38804 4.33196 6.7973 4.9227C6.20656 5.51343 5.87468 6.31465 5.87468 7.15008C5.88338 7.92406 6.18054 8.66695 6.70802 9.23341C5.97356 9.59914 5.34154 10.1417 4.86878 10.8123C4.39603 11.4829 4.09737 12.2604 3.99968 13.0751C3.97537 13.2961 4.03985 13.5177 4.17894 13.6912C4.31803 13.8647 4.52034 13.9758 4.74135 14.0001C4.96237 14.0244 5.18398 13.9599 5.35746 13.8208C5.53093 13.6817 5.64204 13.4794 5.66635 13.2584C5.7658 12.451 6.15706 11.7079 6.76642 11.169C7.37579 10.63 8.1612 10.3326 8.97469 10.3326C9.78817 10.3326 10.5736 10.63 11.1829 11.169C11.7923 11.7079 12.1836 12.451 12.283 13.2584C12.3062 13.4721 12.411 13.6686 12.5756 13.8068C12.7402 13.945 12.9519 14.0142 13.1664 14.0001H13.258C13.4765 13.9749 13.6761 13.8645 13.8135 13.6928C13.9508 13.5211 14.0148 13.3021 13.9914 13.0834C13.9009 12.2731 13.6117 11.4976 13.1494 10.826C12.6871 10.1543 12.066 9.60725 11.3414 9.23341ZM8.99969 8.63342C8.70631 8.63342 8.41952 8.54642 8.17559 8.38343C7.93166 8.22044 7.74153 7.98877 7.62926 7.71773C7.51699 7.44669 7.48762 7.14844 7.54485 6.8607C7.60209 6.57296 7.74336 6.30865 7.95081 6.10121C8.15826 5.89376 8.42256 5.75249 8.7103 5.69525C8.99804 5.63802 9.29629 5.66739 9.56733 5.77966C9.83838 5.89193 10.07 6.08205 10.233 6.32599C10.396 6.56992 10.483 6.85671 10.483 7.15008C10.483 7.54349 10.3267 7.92078 10.0486 8.19896C9.77038 8.47714 9.39309 8.63342 8.99969 8.63342ZM14.833 0.666748H3.16635C2.50331 0.666748 1.86743 0.93014 1.39858 1.39898C0.929743 1.86782 0.666351 2.50371 0.666351 3.16675V14.8334C0.666351 15.4965 0.929743 16.1323 1.39858 16.6012C1.86743 17.07 2.50331 17.3334 3.16635 17.3334H14.833C15.4961 17.3334 16.1319 17.07 16.6008 16.6012C17.0696 16.1323 17.333 15.4965 17.333 14.8334V3.16675C17.333 2.50371 17.0696 1.86782 16.6008 1.39898C16.1319 0.93014 15.4961 0.666748 14.833 0.666748ZM15.6664 14.8334C15.6664 15.0544 15.5786 15.2664 15.4223 15.4227C15.266 15.579 15.054 15.6667 14.833 15.6667H3.16635C2.94534 15.6667 2.73338 15.579 2.5771 15.4227C2.42082 15.2664 2.33302 15.0544 2.33302 14.8334V3.16675C2.33302 2.94573 2.42082 2.73377 2.5771 2.57749C2.73338 2.42121 2.94534 2.33341 3.16635 2.33341H14.833C15.054 2.33341 15.266 2.42121 15.4223 2.57749C15.5786 2.73377 15.6664 2.94573 15.6664 3.16675V14.8334Z" fill="currentColor"></path>
          </svg>
          <span class="is-size-6">Users</span>
        </a>
        <a class="navbar-item mr-3 is-flex is-align-items-center has-text-white" href="#">
          <svg class="mr-2 has-text-grey-dark" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.6416 0.716687C16.0443 0.613798 15.4394 0.560837 14.8333 0.558353C12.7653 0.556658 10.7404 1.14966 8.99997 2.26669C7.25509 1.16433 5.23051 0.585879 3.16664 0.60002C2.56051 0.602503 1.95564 0.655464 1.3583 0.758353C1.16264 0.792085 0.985453 0.894569 0.858646 1.04735C0.73184 1.20013 0.663749 1.39316 0.666635 1.59169V11.5917C0.664851 11.7141 0.690074 11.8355 0.74051 11.9471C0.790947 12.0586 0.865357 12.1577 0.958447 12.2373C1.05154 12.3169 1.16102 12.3749 1.2791 12.4074C1.39718 12.4398 1.52096 12.4459 1.64164 12.425C2.83582 12.2183 4.0593 12.2526 5.24002 12.5259C6.42074 12.7993 7.53482 13.3061 8.51664 14.0167L8.61664 14.075H8.7083C8.80072 14.1135 8.89985 14.1334 8.99997 14.1334C9.10009 14.1334 9.19922 14.1135 9.29164 14.075H9.3833L9.4833 14.0167C10.4583 13.2903 11.5691 12.767 12.7501 12.4778C13.931 12.1887 15.158 12.1395 16.3583 12.3334C16.479 12.3542 16.6028 12.3482 16.7208 12.3157C16.8389 12.2833 16.9484 12.2252 17.0415 12.1456C17.1346 12.0661 17.209 11.967 17.2594 11.8554C17.3099 11.7438 17.3351 11.6225 17.3333 11.5V1.50002C17.3246 1.31015 17.2513 1.12895 17.1255 0.986468C16.9997 0.843991 16.829 0.7488 16.6416 0.716687ZM8.16664 11.7917C6.62487 10.9806 4.90873 10.5573 3.16664 10.5584C2.89164 10.5584 2.61664 10.5584 2.3333 10.5584V2.22502C2.61085 2.20902 2.88909 2.20902 3.16664 2.22502C4.94446 2.22306 6.68348 2.74476 8.16664 3.72502V11.7917ZM15.6666 10.5917C15.3833 10.5917 15.1083 10.5917 14.8333 10.5917C13.0912 10.5906 11.3751 11.0139 9.8333 11.825V3.72502C11.3165 2.74476 13.0555 2.22306 14.8333 2.22502C15.1108 2.20902 15.3891 2.20902 15.6666 2.22502V10.5917ZM16.6416 14.05C16.0443 13.9471 15.4394 13.8942 14.8333 13.8917C12.7653 13.89 10.7404 14.483 8.99997 15.6C7.25956 14.483 5.23466 13.89 3.16664 13.8917C2.56051 13.8942 1.95564 13.9471 1.3583 14.05C1.24982 14.0672 1.14582 14.1057 1.05227 14.1633C0.958721 14.2208 0.87747 14.2963 0.813191 14.3854C0.748912 14.4744 0.702873 14.5753 0.677722 14.6822C0.652571 14.7891 0.648803 14.9 0.666635 15.0084C0.708984 15.2248 0.835377 15.4156 1.01813 15.539C1.20088 15.6623 1.42508 15.7083 1.64164 15.6667C2.83582 15.4599 4.0593 15.4942 5.24002 15.7676C6.42074 16.0409 7.53482 16.5478 8.51664 17.2584C8.65777 17.3588 8.82672 17.4128 8.99997 17.4128C9.17322 17.4128 9.34217 17.3588 9.4833 17.2584C10.4651 16.5478 11.5792 16.0409 12.7599 15.7676C13.9406 15.4942 15.1641 15.4599 16.3583 15.6667C16.5749 15.7083 16.7991 15.6623 16.9818 15.539C17.1646 15.4156 17.291 15.2248 17.3333 15.0084C17.3511 14.9 17.3474 14.7891 17.3222 14.6822C17.2971 14.5753 17.251 14.4744 17.1867 14.3854C17.1225 14.2963 17.0412 14.2208 16.9477 14.1633C16.8541 14.1057 16.7501 14.0672 16.6416 14.05Z" fill="currentColor"></path>
          </svg>
          <span class="is-size-6">Documents</span>
        </a>
        <a class="navbar-item is-flex is-align-items-center has-text-white" href="#">
          <svg class="mr-2 has-text-grey-dark" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.33335 9.83342H1.50002C1.27901 9.83342 1.06704 9.92121 0.910765 10.0775C0.754484 10.2338 0.666687 10.4457 0.666687 10.6667V16.5001C0.666687 16.7211 0.754484 16.9331 0.910765 17.0893C1.06704 17.2456 1.27901 17.3334 1.50002 17.3334H7.33335C7.55437 17.3334 7.76633 17.2456 7.92261 17.0893C8.07889 16.9331 8.16669 16.7211 8.16669 16.5001V10.6667C8.16669 10.4457 8.07889 10.2338 7.92261 10.0775C7.76633 9.92121 7.55437 9.83342 7.33335 9.83342ZM6.50002 15.6667H2.33335V11.5001H6.50002V15.6667ZM16.5 0.666748H10.6667C10.4457 0.666748 10.2337 0.754545 10.0774 0.910826C9.92115 1.06711 9.83335 1.27907 9.83335 1.50008V7.33342C9.83335 7.55443 9.92115 7.76639 10.0774 7.92267C10.2337 8.07895 10.4457 8.16675 10.6667 8.16675H16.5C16.721 8.16675 16.933 8.07895 17.0893 7.92267C17.2456 7.76639 17.3334 7.55443 17.3334 7.33342V1.50008C17.3334 1.27907 17.2456 1.06711 17.0893 0.910826C16.933 0.754545 16.721 0.666748 16.5 0.666748ZM15.6667 6.50008H11.5V2.33341H15.6667V6.50008ZM16.5 9.83342H10.6667C10.4457 9.83342 10.2337 9.92121 10.0774 10.0775C9.92115 10.2338 9.83335 10.4457 9.83335 10.6667V16.5001C9.83335 16.7211 9.92115 16.9331 10.0774 17.0893C10.2337 17.2456 10.4457 17.3334 10.6667 17.3334H16.5C16.721 17.3334 16.933 17.2456 17.0893 17.0893C17.2456 16.9331 17.3334 16.7211 17.3334 16.5001V10.6667C17.3334 10.4457 17.2456 10.2338 17.0893 10.0775C16.933 9.92121 16.721 9.83342 16.5 9.83342ZM15.6667 15.6667H11.5V11.5001H15.6667V15.6667ZM7.33335 0.666748H1.50002C1.27901 0.666748 1.06704 0.754545 0.910765 0.910826C0.754484 1.06711 0.666687 1.27907 0.666687 1.50008V7.33342C0.666687 7.55443 0.754484 7.76639 0.910765 7.92267C1.06704 8.07895 1.27901 8.16675 1.50002 8.16675H7.33335C7.55437 8.16675 7.76633 8.07895 7.92261 7.92267C8.07889 7.76639 8.16669 7.55443 8.16669 7.33342V1.50008C8.16669 1.27907 8.07889 1.06711 7.92261 0.910826C7.76633 0.754545 7.55437 0.666748 7.33335 0.666748ZM6.50002 6.50008H2.33335V2.33341H6.50002V6.50008Z" fill="currentColor"></path>
          </svg>
          <span class="is-size-6">Applications</span>
        </a>
      </div>
      <div class="navbar-end">
        <a class="navbar-item has-text-grey-dark" href="#">
          <svg width="18" height="20" viewbox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V14C0 14.7956 0.316071 15.5587 0.87868 16.1213C1.44129 16.6839 2.20435 17 3 17H5.59L8.29 19.71C8.38344 19.8027 8.49426 19.876 8.61609 19.9258C8.73793 19.9755 8.86839 20.0008 9 20C9.23834 20 9.46886 19.9149 9.65 19.76L12.87 17H15C15.7956 17 16.5587 16.6839 17.1213 16.1213C17.6839 15.5587 18 14.7956 18 14V3C18 2.20435 17.6839 1.44129 17.1213 0.87868C16.5587 0.316071 15.7956 0 15 0ZM16 14C16 14.2652 15.8946 14.5196 15.7071 14.7071C15.5196 14.8946 15.2652 15 15 15H12.5C12.2617 15 12.0311 15.0851 11.85 15.24L9.05 17.64L6.71 15.29C6.61656 15.1973 6.50574 15.124 6.38391 15.0742C6.26207 15.0245 6.13161 14.9992 6 15H3C2.73478 15 2.48043 14.8946 2.29289 14.7071C2.10536 14.5196 2 14.2652 2 14V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H15C15.2652 2 15.5196 2.10536 15.7071 2.29289C15.8946 2.48043 16 2.73478 16 3V14Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="navbar-item has-text-grey-dark" href="#">
          <svg width="16" height="20" viewbox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
          </svg>
        </a>
        <div class="navbar-item">
          <button class="button is-dark p-0 is-flex is-align-items-center has-text-weight-normal">
            <div class="mr-3">
              <p class="has-text-white is-size-6 mb-0">Thomas Brown</p>
              <p class="is-size-6 has-text-grey-dark mb-0">Developer</p>
            </div>
            <div class="mr-2">
              <img class="image is-rounded is-32x32 is-cover" style="border-radius: 50% !important;" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;crop=faces&amp;fit=crop&amp;h=128&amp;w=128" alt="alt">
            </div>
            <span>
              <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.0833 7.66675C13.75 7.33341 13.25 7.33341 12.9166 7.66675L9.99996 10.5834L7.08329 7.66675C6.74996 7.33341 6.24996 7.33341 5.91663 7.66675C5.58329 8.00008 5.58329 8.50008 5.91663 8.83342L9.41663 12.3334C9.58329 12.5001 9.74996 12.5834 9.99996 12.5834C10.25 12.5834 10.4166 12.5001 10.5833 12.3334L14.0833 8.83342C14.4166 8.50008 14.4166 8.00008 14.0833 7.66675Z" fill="#526172"></path>
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
  </nav>
  <nav class="navbar has-background-white is-hidden-touch">
    <div class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item mr-3 has-text-grey-dark" href="#">
          <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" ,="">
            <path d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M10 13.125C11.7259 13.125 13.125 11.7259 13.125 10C13.125 8.27411 11.7259 6.875 10 6.875C8.27411 6.875 6.875 8.27411 6.875 10C6.875 11.7259 8.27411 13.125 10 13.125Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.79032 7.79029L4.69673 4.6967" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M12.2097 7.79029L15.3033 4.6967" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M12.2097 12.2097L15.3033 15.3033" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.79032 12.2097L4.69673 15.3033" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="is-size-6 ml-2">Support Center</span>
        </a>
        <a class="navbar-item mr-3 has-text-grey-dark" href="#">
          <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" ,="">
            <path d="M16.25 3.125H3.75C3.40482 3.125 3.125 3.40482 3.125 3.75V16.25C3.125 16.5952 3.40482 16.875 3.75 16.875H16.25C16.5952 16.875 16.875 16.5952 16.875 16.25V3.75C16.875 3.40482 16.5952 3.125 16.25 3.125Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3.12454 12.5H5.99066C6.07273 12.5 6.15401 12.5162 6.22984 12.5476C6.30566 12.579 6.37456 12.625 6.4326 12.6831L7.94148 14.1919C7.99952 14.25 8.06842 14.296 8.14425 14.3274C8.22008 14.3588 8.30135 14.375 8.38343 14.375H11.6157C11.6977 14.375 11.779 14.3588 11.8548 14.3274C11.9307 14.296 11.9996 14.25 12.0576 14.1919L13.5665 12.6831C13.6245 12.625 13.6934 12.579 13.7692 12.5476C13.8451 12.5162 13.9263 12.5 14.0084 12.5H16.8745" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="is-size-6 ml-2">Inbox</span>
        </a>
        <a class="navbar-item mr-3 has-text-grey-dark" href="#">
          <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" ,="">
            <path d="M17.5 6.875V15.6944C17.5 15.8418 17.4415 15.9831 17.3373 16.0873C17.2331 16.1915 17.0918 16.25 16.9444 16.25H3.125C2.95924 16.25 2.80027 16.1842 2.68306 16.0669C2.56585 15.9497 2.5 15.7908 2.5 15.625V5C2.5 4.83424 2.56585 4.67527 2.68306 4.55806C2.80027 4.44085 2.95924 4.375 3.125 4.375H7.29167C7.4269 4.375 7.55848 4.41886 7.66667 4.5L9.83333 6.125C9.94152 6.20614 10.0731 6.25 10.2083 6.25H16.875C17.0408 6.25 17.1997 6.31585 17.3169 6.43306C17.4342 6.55027 17.5 6.70924 17.5 6.875Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="is-size-6 ml-2">File Manager</span>
        </a>
        <a class="navbar-item has-text-grey-dark" href="#">
          <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" ,="">
            <path d="M7.5 5H16.875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.50049 10H16.875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.50049 15H16.875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3.125 5H4.375" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3.12549 10H4.37501" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3.12549 15H4.37501" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="is-size-6 ml-2">Data List</span>
        </a>
      </div>
      <div class="navbar-end">
        <a class="navbar-item has-text-grey-dark" href="#">
          <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" ,="">
            <path d="M10 12.5C11.3807 12.5 12.5 11.3807 12.5 10C12.5 8.61929 11.3807 7.5 10 7.5C8.61929 7.5 7.5 8.61929 7.5 10C7.5 11.3807 8.61929 12.5 10 12.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.5995 3.44952L8.12533 2.34422C8.04623 2.28471 7.95413 2.24486 7.85661 2.22794C7.75909 2.21102 7.65894 2.21752 7.56442 2.2469C7.10786 2.38988 6.6649 2.57315 6.24079 2.79455C6.15299 2.8406 6.07741 2.90687 6.02027 2.98789C5.96313 3.06891 5.92608 3.16236 5.91218 3.26052L5.65158 5.08481C5.55224 5.17286 5.45499 5.26444 5.35982 5.35955C5.26468 5.45469 5.17308 5.55197 5.085 5.65138L5.08497 5.65142L3.261 5.91225C3.163 5.92611 3.06969 5.96305 2.98877 6.02005C2.90785 6.07704 2.84163 6.15245 2.79557 6.24006C2.57383 6.66399 2.3902 7.1068 2.24686 7.56325C2.21734 7.6579 2.21076 7.7582 2.22764 7.8559C2.24453 7.95359 2.28441 8.04586 2.34399 8.1251L3.44968 9.59934C3.4417 9.73185 3.43769 9.86537 3.43766 9.99992C3.43766 10.1345 3.44167 10.268 3.44969 10.4006L3.44968 10.4006L2.34438 11.8748C2.28488 11.9539 2.24503 12.046 2.22811 12.1435C2.21119 12.2411 2.21769 12.3412 2.24707 12.4357C2.39004 12.8923 2.57331 13.3352 2.79471 13.7594C2.84076 13.8472 2.90703 13.9227 2.98805 13.9799C3.06907 14.037 3.16252 14.0741 3.26068 14.088L5.08497 14.3486C5.17302 14.4479 5.2646 14.5452 5.35972 14.6403C5.45485 14.7355 5.55213 14.8271 5.65155 14.9151L5.65158 14.9152L5.91241 16.7392C5.92627 16.8372 5.96321 16.9305 6.02021 17.0114C6.0772 17.0923 6.15261 17.1585 6.24022 17.2046C6.66416 17.4263 7.10696 17.61 7.56341 17.7533C7.65806 17.7828 7.75837 17.7894 7.85606 17.7725C7.95375 17.7556 8.04602 17.7157 8.12527 17.6562L9.59951 16.5505C9.73201 16.5584 9.86553 16.5625 10.0001 16.5625C10.1346 16.5625 10.2682 16.5585 10.4008 16.5505L10.4008 16.5505L11.875 17.6558C11.9541 17.7153 12.0462 17.7551 12.1437 17.772C12.2412 17.789 12.3414 17.7825 12.4359 17.7531C12.8925 17.6101 13.3354 17.4269 13.7595 17.2054C13.8473 17.1594 13.9229 17.0931 13.98 17.0121C14.0372 16.9311 14.0742 16.8376 14.0881 16.7395L14.3487 14.9152C14.4481 14.8271 14.5453 14.7356 14.6405 14.6404C14.7356 14.5453 14.8272 14.448 14.9153 14.3486L14.9153 14.3486L16.7393 14.0877C16.8373 14.0739 16.9306 14.0369 17.0115 13.9799C17.0925 13.923 17.1587 13.8475 17.2047 13.7599C17.4265 13.336 17.6101 12.8932 17.7535 12.4367C17.783 12.3421 17.7896 12.2418 17.7727 12.1441C17.7558 12.0464 17.7159 11.9541 17.6563 11.8749L16.5506 10.4006C16.5586 10.2681 16.5626 10.1346 16.5627 10.0001C16.5627 9.86553 16.5586 9.73197 16.5506 9.59939L16.5506 9.59934L17.6559 8.12517C17.7154 8.04607 17.7553 7.95397 17.7722 7.85645C17.7891 7.75893 17.7826 7.65878 17.7532 7.56427C17.6103 7.1077 17.427 6.66474 17.2056 6.24063C17.1595 6.15283 17.0933 6.07725 17.0123 6.02011C16.9312 5.96297 16.8378 5.92592 16.7396 5.91202L14.9153 5.65142C14.8273 5.55208 14.7357 5.45483 14.6406 5.35966C14.5455 5.26453 14.4482 5.17292 14.3488 5.08485L14.3487 5.08481L14.0879 3.26084C14.074 3.16284 14.0371 3.06953 13.9801 2.98861C13.9231 2.90769 13.8477 2.84147 13.7601 2.79541C13.3362 2.57367 12.8933 2.39004 12.4369 2.2467C12.3423 2.21718 12.2419 2.2106 12.1443 2.22748C12.0466 2.24437 11.9543 2.28425 11.875 2.34383L10.4008 3.44952C10.2683 3.44154 10.1348 3.43754 10.0002 3.4375C9.86569 3.4375 9.73213 3.44151 9.59955 3.44953L9.5995 3.44952Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
        <a class="navbar-item" href="#">
          <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" ,="">
            <path d="M13.5946 6.71875L16.875 10L13.5946 13.2813" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M8.125 10H16.8727" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M8.125 16.875H3.75C3.58424 16.875 3.42527 16.8092 3.30806 16.6919C3.19085 16.5747 3.125 16.4158 3.125 16.25V3.75C3.125 3.58424 3.19085 3.42527 3.30806 3.30806C3.42527 3.19085 3.58424 3.125 3.75 3.125H8.125" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
  </nav>
  <div :class="{ 'is-block': mobileNavOpen, 'is-hidden': !mobileNavOpen }" class="navbar-side is-relative" style="z-index: 9999;">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-backdrop is-fixed is-top-0 is-left-0 is-bottom-0 is-right-0 has-background-dark" style="opacity: .5"></div>
    <div class="is-fixed is-top-0 is-left-0 is-bottom-0 has-mw-xs has-background-dark pt-5" style="width: 80%; height: 100%; overflow-y: auto; overflow-x: hidden;">
      <div class="px-5 pb-2">
        <a href="#">
          <img class="image" src="artemis-assets/logos/artemis-logo.svg" alt="alt" width="auto">
        </a>
      </div>
      <aside class="menu py-5 px-5 has-background-dark">
        <p class="menu-label mb-4 is-size-7">Main</p>
        <ul class="mb-5 menu-list is-size-6">
          <li>
            <a class="py-3 is-active is-flex is-align-items-center" href="#">
              <svg class="mr-3" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.9066 3.12873C14.9005 3.12223 14.8987 3.11358 14.8923 3.10722C14.8859 3.10086 14.8771 3.09893 14.8706 3.09278C13.3119 1.53907 11.2008 0.666626 8.99996 0.666626C6.79914 0.666626 4.68807 1.53907 3.12935 3.09278C3.12279 3.09893 3.11404 3.10081 3.10763 3.10722C3.10122 3.11363 3.09944 3.12222 3.09334 3.12873C1.93189 4.29575 1.14217 5.78067 0.823851 7.39609C0.505534 9.01151 0.672885 10.685 1.30478 12.2054C1.93668 13.7258 3.00481 15.025 4.37435 15.9389C5.7439 16.8528 7.35348 17.3405 8.99996 17.3405C10.6464 17.3405 12.256 16.8528 13.6256 15.9389C14.9951 15.025 16.0632 13.7258 16.6951 12.2054C17.327 10.685 17.4944 9.01151 17.1761 7.39609C16.8578 5.78067 16.068 4.29575 14.9066 3.12873ZM8.99992 15.6666C8.00181 15.6663 7.01656 15.4414 6.11714 15.0087C5.21773 14.5759 4.42719 13.9464 3.80409 13.1666H7.15015C7.38188 13.4286 7.66662 13.6383 7.98551 13.782C8.3044 13.9257 8.65017 14 8.99992 14C9.34968 14 9.69544 13.9257 10.0143 13.782C10.3332 13.6383 10.618 13.4286 10.8497 13.1666H14.1958C13.5727 13.9464 12.7821 14.5759 11.8827 15.0087C10.9833 15.4414 9.99804 15.6663 8.99992 15.6666ZM8.16659 11.5C8.16659 11.3351 8.21546 11.174 8.30703 11.037C8.3986 10.8999 8.52875 10.7931 8.68102 10.7301C8.83329 10.667 9.00085 10.6505 9.1625 10.6826C9.32415 10.7148 9.47263 10.7942 9.58918 10.9107C9.70572 11.0272 9.78509 11.1757 9.81724 11.3374C9.8494 11.499 9.83289 11.6666 9.76982 11.8189C9.70675 11.9711 9.59994 12.1013 9.4629 12.1929C9.32586 12.2844 9.16474 12.3333 8.99992 12.3333C8.77898 12.3331 8.56714 12.2452 8.41091 12.089C8.25468 11.9327 8.16681 11.7209 8.16659 11.5ZM15.1751 11.5017L15.1665 11.5H11.4999C11.4983 10.9846 11.3373 10.4824 11.0389 10.0623C10.7405 9.64218 10.3193 9.32472 9.83325 9.15352V6.49996C9.83325 6.27894 9.74546 6.06698 9.58918 5.9107C9.4329 5.75442 9.22093 5.66663 8.99992 5.66663C8.77891 5.66663 8.56695 5.75442 8.41067 5.9107C8.25439 6.06698 8.16659 6.27894 8.16659 6.49996V9.15352C7.68054 9.32472 7.25939 9.64218 6.96098 10.0623C6.66256 10.4824 6.50151 10.9846 6.49992 11.5H2.83334L2.82474 11.5017C2.60799 10.9669 2.46221 10.406 2.39114 9.83329H3.16659C3.3876 9.83329 3.59956 9.74549 3.75584 9.58921C3.91212 9.43293 3.99992 9.22097 3.99992 8.99996C3.99992 8.77894 3.91212 8.56698 3.75584 8.4107C3.59956 8.25442 3.3876 8.16663 3.16659 8.16663H2.39114C2.54005 6.9821 3.00621 5.85981 3.74037 4.91838L4.28597 5.46399C4.36335 5.54137 4.4552 5.60274 4.5563 5.64462C4.65739 5.68649 4.76574 5.70804 4.87517 5.70804C4.98459 5.70804 5.09294 5.68649 5.19404 5.64461C5.29513 5.60274 5.38699 5.54136 5.46436 5.46399C5.54173 5.38661 5.60311 5.29476 5.64498 5.19366C5.68686 5.09257 5.70841 4.98422 5.70841 4.87479C5.70841 4.76537 5.68686 4.65702 5.64498 4.55592C5.60311 4.45483 5.54173 4.36297 5.46435 4.2856L4.91881 3.74005C5.86016 3.00613 6.98227 2.5401 8.16659 2.39118V3.16663C8.16659 3.38764 8.25439 3.5996 8.41067 3.75588C8.56695 3.91216 8.77891 3.99996 8.99992 3.99996C9.22093 3.99996 9.4329 3.91216 9.58918 3.75588C9.74546 3.5996 9.83325 3.38764 9.83325 3.16663V2.39118C11.0176 2.5401 12.1397 3.00613 13.081 3.74005L12.5355 4.2856C12.3792 4.44186 12.2914 4.6538 12.2914 4.87479C12.2914 5.09578 12.3792 5.30772 12.5355 5.46399C12.6917 5.62025 12.9037 5.70804 13.1247 5.70804C13.3457 5.70804 13.5576 5.62026 13.7139 5.46399L14.2595 4.91838C14.9936 5.85981 15.4598 6.9821 15.6087 8.16663H14.8333C14.6122 8.16663 14.4003 8.25442 14.244 8.4107C14.0877 8.56698 13.9999 8.77894 13.9999 8.99996C13.9999 9.22097 14.0877 9.43293 14.244 9.58921C14.4003 9.74549 14.6122 9.83329 14.8333 9.83329H15.6087C15.5376 10.406 15.3919 10.9669 15.1751 11.5017Z" fill="#D7D5F8"></path>
              </svg>
              <span class="mr-auto">Dashboard</span>
              <svg viewbox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 12px;height: 12px">
                <path d="M9.08329 0.666626C8.74996 0.333293 8.24996 0.333293 7.91663 0.666626L4.99996 3.58329L2.08329 0.666626C1.74996 0.333293 1.24996 0.333293 0.916626 0.666626C0.583293 0.999959 0.583293 1.49996 0.916626 1.83329L4.41663 5.33329C4.58329 5.49996 4.74996 5.58329 4.99996 5.58329C5.24996 5.58329 5.41663 5.49996 5.58329 5.33329L9.08329 1.83329C9.41663 1.49996 9.41663 0.999959 9.08329 0.666626Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="py-3 is-flex is-align-items-center has-background-dark has-text-white" href="#">
              <svg class="mr-3 has-text-grey-dark" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.0002 0.666626C4.41687 0.666626 0.66687 4.41663 0.66687 8.99996C0.66687 13.5833 4.41687 17.3333 9.0002 17.3333C13.5835 17.3333 17.3335 13.5833 17.3335 8.99996C17.3335 4.41663 13.5835 0.666626 9.0002 0.666626ZM2.58354 10.6666C2.41687 10.0833 2.33354 9.58329 2.33354 8.99996C2.33354 8.41663 2.41687 7.91663 2.58354 7.33329H4.16687C4.0002 8.41663 4.0002 9.58329 4.16687 10.6666H2.58354ZM3.2502 12.3333H4.41687C4.58354 13.0833 4.83354 13.8333 5.2502 14.5C4.41687 13.9166 3.7502 13.1666 3.2502 12.3333ZM4.41687 5.66663H3.2502C3.7502 4.83329 4.41687 4.08329 5.2502 3.49996C4.83354 4.16663 4.58354 4.91663 4.41687 5.66663ZM8.16687 15.4166C7.16687 14.6666 6.41687 13.5833 6.16687 12.3333H8.16687V15.4166ZM8.16687 10.6666H5.7502C5.66687 10.0833 5.66687 9.58329 5.66687 8.99996C5.66687 8.41663 5.66687 7.91663 5.7502 7.33329H8.16687V10.6666ZM8.16687 5.66663H6.16687C6.41687 4.41663 7.16687 3.33329 8.16687 2.58329V5.66663ZM14.7502 5.66663H13.5835C13.4169 4.91663 13.1669 4.16663 12.7502 3.49996C13.5835 4.08329 14.2502 4.83329 14.7502 5.66663ZM9.83354 2.58329C10.8335 3.33329 11.5835 4.41663 11.8335 5.66663H9.83354V2.58329ZM9.83354 15.4166V12.3333H11.8335C11.5835 13.5833 10.8335 14.6666 9.83354 15.4166ZM12.2502 10.6666H9.83354V7.33329H12.2502C12.3335 8.41663 12.3335 9.58329 12.2502 10.6666ZM12.8335 14.5C13.1669 13.8333 13.4169 13.0833 13.6669 12.3333H14.8335C14.2502 13.1666 13.5835 13.9166 12.8335 14.5ZM13.9169 10.6666C14.0835 9.58329 14.0835 8.41663 13.9169 7.33329H15.5002C15.8335 8.41663 15.8335 9.58329 15.5002 10.6666H13.9169Z" fill="currentColor"></path>
              </svg>
              <span class="mr-auto">Discover</span>
              <div class="is-inline-flex has-background-primary has-text-white is-size-7 is-justify-content-center is-align-items-center" style="width: 24px; height: 24px; border-radius: 50% !important;">4</div>
            </a>
          </li>
          <li>
            <a class="py-3 is-flex is-align-items-center has-background-dark has-text-white" href="#">
              <svg class="mr-3 has-text-grey-dark" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.3414 9.23329C11.8689 8.66683 12.166 7.92394 12.1747 7.14996C12.1747 6.31453 11.8428 5.51331 11.2521 4.92257C10.6614 4.33183 9.86015 3.99996 9.02472 3.99996C8.18928 3.99996 7.38807 4.33183 6.79733 4.92257C6.20659 5.51331 5.87472 6.31453 5.87472 7.14996C5.88341 7.92394 6.18057 8.66683 6.70805 9.23329C5.97359 9.59902 5.34157 10.1416 4.86881 10.8122C4.39606 11.4827 4.0974 12.2603 3.99972 13.075C3.9754 13.296 4.03989 13.5176 4.17897 13.6911C4.31806 13.8645 4.52037 13.9756 4.74138 14C4.9624 14.0243 5.18401 13.9598 5.35749 13.8207C5.53096 13.6816 5.64207 13.4793 5.66638 13.2583C5.76583 12.4509 6.15709 11.7078 6.76645 11.1688C7.37582 10.6299 8.16123 10.3324 8.97472 10.3324C9.7882 10.3324 10.5736 10.6299 11.183 11.1688C11.7923 11.7078 12.1836 12.4509 12.283 13.2583C12.3062 13.472 12.4111 13.6684 12.5757 13.8066C12.7403 13.9448 12.9519 14.0141 13.1664 14H13.258C13.4765 13.9748 13.6762 13.8644 13.8135 13.6927C13.9509 13.521 14.0148 13.3019 13.9914 13.0833C13.9009 12.2729 13.6117 11.4975 13.1494 10.8258C12.6871 10.1542 12.066 9.60713 11.3414 9.23329ZM8.99972 8.63329C8.70634 8.63329 8.41955 8.5463 8.17562 8.38331C7.93169 8.22031 7.74156 7.98865 7.62929 7.71761C7.51702 7.44656 7.48765 7.14831 7.54488 6.86058C7.60212 6.57284 7.74339 6.30853 7.95084 6.10108C8.15829 5.89364 8.42259 5.75236 8.71033 5.69513C8.99807 5.63789 9.29632 5.66727 9.56736 5.77954C9.83841 5.89181 10.0701 6.08193 10.2331 6.32586C10.3961 6.5698 10.483 6.85658 10.483 7.14996C10.483 7.54336 10.3268 7.92066 10.0486 8.19883C9.77041 8.47701 9.39312 8.63329 8.99972 8.63329ZM14.833 0.666626H3.16638C2.50334 0.666626 1.86746 0.930018 1.39862 1.39886C0.929774 1.8677 0.666382 2.50358 0.666382 3.16663V14.8333C0.666382 15.4963 0.929774 16.1322 1.39862 16.6011C1.86746 17.0699 2.50334 17.3333 3.16638 17.3333H14.833C15.4961 17.3333 16.132 17.0699 16.6008 16.6011C17.0697 16.1322 17.333 15.4963 17.333 14.8333V3.16663C17.333 2.50358 17.0697 1.8677 16.6008 1.39886C16.132 0.930018 15.4961 0.666626 14.833 0.666626ZM15.6664 14.8333C15.6664 15.0543 15.5786 15.2663 15.4223 15.4225C15.266 15.5788 15.0541 15.6666 14.833 15.6666H3.16638C2.94537 15.6666 2.73341 15.5788 2.57713 15.4225C2.42085 15.2663 2.33305 15.0543 2.33305 14.8333V3.16663C2.33305 2.94561 2.42085 2.73365 2.57713 2.57737C2.73341 2.42109 2.94537 2.33329 3.16638 2.33329H14.833C15.0541 2.33329 15.266 2.42109 15.4223 2.57737C15.5786 2.73365 15.6664 2.94561 15.6664 3.16663V14.8333Z" fill="currentColor"></path>
              </svg>
              <span class="mr-auto">Users</span>
              <svg viewbox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 12px;height: 12px">
                <path d="M9.08329 0.666626C8.74996 0.333293 8.24996 0.333293 7.91663 0.666626L4.99996 3.58329L2.08329 0.666626C1.74996 0.333293 1.24996 0.333293 0.916626 0.666626C0.583293 0.999959 0.583293 1.49996 0.916626 1.83329L4.41663 5.33329C4.58329 5.49996 4.74996 5.58329 4.99996 5.58329C5.24996 5.58329 5.41663 5.49996 5.58329 5.33329L9.08329 1.83329C9.41663 1.49996 9.41663 0.999959 9.08329 0.666626Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="py-3 is-flex is-align-items-center has-background-dark has-text-white" href="#">
              <svg class="mr-3 has-text-grey-dark" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.6416 0.716687C16.0442 0.613798 15.4394 0.560837 14.8332 0.558353C12.7652 0.556658 10.7403 1.14966 8.99991 2.26669C7.25503 1.16433 5.23045 0.585879 3.16657 0.60002C2.56045 0.602503 1.95558 0.655464 1.35824 0.758353C1.16258 0.792085 0.985392 0.894569 0.858585 1.04735C0.731779 1.20013 0.663688 1.39316 0.666574 1.59169V11.5917C0.66479 11.7141 0.690013 11.8355 0.740449 11.9471C0.790886 12.0586 0.865296 12.1577 0.958385 12.2373C1.05147 12.3169 1.16096 12.3749 1.27904 12.4074C1.39712 12.4398 1.5209 12.4459 1.64157 12.425C2.83576 12.2183 4.05924 12.2526 5.23996 12.5259C6.42068 12.7993 7.53476 13.3061 8.51657 14.0167L8.61657 14.075H8.70824C8.80066 14.1135 8.89979 14.1334 8.99991 14.1334C9.10003 14.1334 9.19916 14.1135 9.29157 14.075H9.38324L9.48324 14.0167C10.4582 13.2903 11.5691 12.767 12.75 12.4778C13.931 12.1887 15.158 12.1395 16.3582 12.3334C16.4789 12.3542 16.6027 12.3482 16.7208 12.3157C16.8389 12.2833 16.9483 12.2252 17.0414 12.1456C17.1345 12.0661 17.2089 11.967 17.2594 11.8554C17.3098 11.7438 17.335 11.6225 17.3332 11.5V1.50002C17.3246 1.31015 17.2512 1.12895 17.1254 0.986468C16.9996 0.843991 16.8289 0.7488 16.6416 0.716687ZM8.16657 11.7917C6.62481 10.9806 4.90867 10.5573 3.16657 10.5584C2.89157 10.5584 2.61657 10.5584 2.33324 10.5584V2.22502C2.61079 2.20902 2.88903 2.20902 3.16657 2.22502C4.9444 2.22306 6.68342 2.74476 8.16657 3.72502V11.7917ZM15.6666 10.5917C15.3832 10.5917 15.1082 10.5917 14.8332 10.5917C13.0911 10.5906 11.375 11.0139 9.83324 11.825V3.72502C11.3164 2.74476 13.0554 2.22306 14.8332 2.22502C15.1108 2.20902 15.389 2.20902 15.6666 2.22502V10.5917ZM16.6416 14.05C16.0442 13.9471 15.4394 13.8942 14.8332 13.8917C12.7652 13.89 10.7403 14.483 8.99991 15.6C7.2595 14.483 5.2346 13.89 3.16657 13.8917C2.56045 13.8942 1.95558 13.9471 1.35824 14.05C1.24976 14.0672 1.14576 14.1057 1.05221 14.1633C0.95866 14.2208 0.877409 14.2963 0.81313 14.3854C0.748851 14.4744 0.702812 14.5753 0.677661 14.6822C0.65251 14.7891 0.648742 14.9 0.666574 15.0084C0.708923 15.2248 0.835316 15.4156 1.01807 15.539C1.20082 15.6623 1.42502 15.7083 1.64157 15.6667C2.83576 15.4599 4.05924 15.4942 5.23996 15.7676C6.42068 16.0409 7.53476 16.5478 8.51657 17.2584C8.65771 17.3588 8.82665 17.4128 8.99991 17.4128C9.17316 17.4128 9.34211 17.3588 9.48324 17.2584C10.4651 16.5478 11.5791 16.0409 12.7599 15.7676C13.9406 15.4942 15.1641 15.4599 16.3582 15.6667C16.5748 15.7083 16.799 15.6623 16.9817 15.539C17.1645 15.4156 17.2909 15.2248 17.3332 15.0084C17.3511 14.9 17.3473 14.7891 17.3222 14.6822C17.297 14.5753 17.251 14.4744 17.1867 14.3854C17.1224 14.2963 17.0412 14.2208 16.9476 14.1633C16.8541 14.1057 16.7501 14.0672 16.6416 14.05Z" fill="currentColor"></path>
              </svg>
              <span class="mr-auto">Documents</span>
              <svg viewbox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 12px;height: 12px">
                <path d="M9.08329 0.666626C8.74996 0.333293 8.24996 0.333293 7.91663 0.666626L4.99996 3.58329L2.08329 0.666626C1.74996 0.333293 1.24996 0.333293 0.916626 0.666626C0.583293 0.999959 0.583293 1.49996 0.916626 1.83329L4.41663 5.33329C4.58329 5.49996 4.74996 5.58329 4.99996 5.58329C5.24996 5.58329 5.41663 5.49996 5.58329 5.33329L9.08329 1.83329C9.41663 1.49996 9.41663 0.999959 9.08329 0.666626Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li>
            <a class="py-3 is-flex is-align-items-center has-background-dark has-text-white" href="#">
              <svg class="mr-3 has-text-grey-dark" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.33329 9.83329H1.49996C1.27895 9.83329 1.06698 9.92109 0.910704 10.0774C0.754423 10.2337 0.666626 10.4456 0.666626 10.6666V16.5C0.666626 16.721 0.754423 16.9329 0.910704 17.0892C1.06698 17.2455 1.27895 17.3333 1.49996 17.3333H7.33329C7.55431 17.3333 7.76627 17.2455 7.92255 17.0892C8.07883 16.9329 8.16663 16.721 8.16663 16.5V10.6666C8.16663 10.4456 8.07883 10.2337 7.92255 10.0774C7.76627 9.92109 7.55431 9.83329 7.33329 9.83329ZM6.49996 15.6666H2.33329V11.5H6.49996V15.6666ZM16.5 0.666626H10.6666C10.4456 0.666626 10.2337 0.754423 10.0774 0.910704C9.92109 1.06698 9.83329 1.27895 9.83329 1.49996V7.33329C9.83329 7.55431 9.92109 7.76627 10.0774 7.92255C10.2337 8.07883 10.4456 8.16663 10.6666 8.16663H16.5C16.721 8.16663 16.9329 8.07883 17.0892 7.92255C17.2455 7.76627 17.3333 7.55431 17.3333 7.33329V1.49996C17.3333 1.27895 17.2455 1.06698 17.0892 0.910704C16.9329 0.754423 16.721 0.666626 16.5 0.666626ZM15.6666 6.49996H11.5V2.33329H15.6666V6.49996ZM16.5 9.83329H10.6666C10.4456 9.83329 10.2337 9.92109 10.0774 10.0774C9.92109 10.2337 9.83329 10.4456 9.83329 10.6666V16.5C9.83329 16.721 9.92109 16.9329 10.0774 17.0892C10.2337 17.2455 10.4456 17.3333 10.6666 17.3333H16.5C16.721 17.3333 16.9329 17.2455 17.0892 17.0892C17.2455 16.9329 17.3333 16.721 17.3333 16.5V10.6666C17.3333 10.4456 17.2455 10.2337 17.0892 10.0774C16.9329 9.92109 16.721 9.83329 16.5 9.83329ZM15.6666 15.6666H11.5V11.5H15.6666V15.6666ZM7.33329 0.666626H1.49996C1.27895 0.666626 1.06698 0.754423 0.910704 0.910704C0.754423 1.06698 0.666626 1.27895 0.666626 1.49996V7.33329C0.666626 7.55431 0.754423 7.76627 0.910704 7.92255C1.06698 8.07883 1.27895 8.16663 1.49996 8.16663H7.33329C7.55431 8.16663 7.76627 8.07883 7.92255 7.92255C8.07883 7.76627 8.16663 7.55431 8.16663 7.33329V1.49996C8.16663 1.27895 8.07883 1.06698 7.92255 0.910704C7.76627 0.754423 7.55431 0.666626 7.33329 0.666626ZM6.49996 6.49996H2.33329V2.33329H6.49996V6.49996Z" fill="currentColor"></path>
              </svg>
              <span class="mr-auto">Applications</span>
              <svg viewbox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 12px;height: 12px">
                <path d="M9.08329 0.666626C8.74996 0.333293 8.24996 0.333293 7.91663 0.666626L4.99996 3.58329L2.08329 0.666626C1.74996 0.333293 1.24996 0.333293 0.916626 0.666626C0.583293 0.999959 0.583293 1.49996 0.916626 1.83329L4.41663 5.33329C4.58329 5.49996 4.74996 5.58329 4.99996 5.58329C5.24996 5.58329 5.41663 5.49996 5.58329 5.33329L9.08329 1.83329C9.41663 1.49996 9.41663 0.999959 9.08329 0.666626Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
        </ul>
        <p class="menu-label mb-4 is-size-7" style="font-size: 12px;">Secondary</p>
        <ul class="mb-6 menu-list is-size-6">
          <li>
            <a class="py-3 is-flex is-align-items-center has-background-dark has-text-white" href="#">
              <svg class="mr-3 has-text-grey-dark" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.40854 11.7416C8.3727 11.7812 8.33931 11.823 8.30854 11.8666C8.277 11.9131 8.25178 11.9635 8.23354 12.0166C8.20951 12.0639 8.19266 12.1144 8.18354 12.1666C8.17945 12.2221 8.17945 12.2778 8.18354 12.3333C8.18072 12.4426 8.20356 12.5511 8.25021 12.65C8.28763 12.7534 8.34734 12.8473 8.42511 12.9251C8.50288 13.0028 8.59679 13.0625 8.70021 13.1C8.79996 13.144 8.90781 13.1668 9.01687 13.1668C9.12593 13.1668 9.23379 13.144 9.33354 13.1C9.43695 13.0625 9.53087 13.0028 9.60864 12.9251C9.6864 12.8473 9.74611 12.7534 9.78354 12.65C9.82054 12.5486 9.83753 12.4411 9.83354 12.3333C9.83417 12.2236 9.81315 12.1149 9.77168 12.0134C9.73021 11.9118 9.66911 11.8195 9.59187 11.7416C9.5144 11.6635 9.42224 11.6015 9.32069 11.5592C9.21914 11.5169 9.11022 11.4951 9.00021 11.4951C8.8902 11.4951 8.78128 11.5169 8.67973 11.5592C8.57818 11.6015 8.48601 11.6635 8.40854 11.7416ZM9.00021 0.666626C7.35203 0.666626 5.74086 1.15537 4.37045 2.07105C3.00005 2.98672 1.93194 4.28821 1.30121 5.81093C0.670481 7.33365 0.505453 9.0092 0.826997 10.6257C1.14854 12.2422 1.94221 13.7271 3.10765 14.8925C4.27309 16.058 5.75795 16.8516 7.37445 17.1732C8.99096 17.4947 10.6665 17.3297 12.1892 16.699C13.712 16.0682 15.0134 15.0001 15.9291 13.6297C16.8448 12.2593 17.3335 10.6481 17.3335 8.99996C17.3335 7.90561 17.118 6.82198 16.6992 5.81093C16.2804 4.79988 15.6666 3.88122 14.8928 3.1074C14.1189 2.33358 13.2003 1.71975 12.1892 1.30096C11.1782 0.882174 10.0946 0.666626 9.00021 0.666626ZM9.00021 15.6666C7.68166 15.6666 6.39273 15.2756 5.2964 14.5431C4.20008 13.8105 3.34559 12.7694 2.84101 11.5512C2.33643 10.333 2.2044 8.99256 2.46164 7.69936C2.71887 6.40615 3.35381 5.21826 4.28616 4.28591C5.21851 3.35356 6.4064 2.71863 7.6996 2.46139C8.99281 2.20416 10.3333 2.33618 11.5514 2.84076C12.7696 3.34535 13.8108 4.19983 14.5433 5.29616C15.2759 6.39249 15.6669 7.68142 15.6669 8.99996C15.6669 10.7681 14.9645 12.4638 13.7143 13.714C12.464 14.9642 10.7683 15.6666 9.00021 15.6666ZM9.00021 4.83329C8.56109 4.83301 8.12965 4.94839 7.7493 5.16783C7.36894 5.38726 7.0531 5.70301 6.83354 6.08329C6.77324 6.17814 6.73276 6.28421 6.71452 6.39511C6.69628 6.50601 6.70066 6.61945 6.7274 6.72861C6.75414 6.83778 6.80268 6.94041 6.87011 7.03032C6.93754 7.12024 7.02246 7.19558 7.11977 7.25183C7.21707 7.30808 7.32475 7.34406 7.43632 7.35761C7.54789 7.37116 7.66105 7.362 7.76899 7.33069C7.87693 7.29938 7.97742 7.24655 8.06441 7.17539C8.15141 7.10423 8.22311 7.01621 8.27521 6.91663C8.34863 6.78946 8.45435 6.68394 8.58166 6.61077C8.70898 6.53761 8.85336 6.49938 9.00021 6.49996C9.22122 6.49996 9.43318 6.58776 9.58946 6.74404C9.74574 6.90032 9.83354 7.11228 9.83354 7.33329C9.83354 7.55431 9.74574 7.76627 9.58946 7.92255C9.43318 8.07883 9.22122 8.16663 9.00021 8.16663C8.77919 8.16663 8.56723 8.25442 8.41095 8.4107C8.25467 8.56698 8.16687 8.77895 8.16687 8.99996V9.83329C8.16687 10.0543 8.25467 10.2663 8.41095 10.4225C8.56723 10.5788 8.77919 10.6666 9.00021 10.6666C9.22122 10.6666 9.43318 10.5788 9.58946 10.4225C9.74574 10.2663 9.83354 10.0543 9.83354 9.83329V9.68329C10.3847 9.48331 10.848 9.09598 11.1425 8.58902C11.437 8.08205 11.544 7.4877 11.4447 6.90987C11.3454 6.33203 11.0462 5.80747 10.5994 5.42789C10.1525 5.0483 9.58649 4.83784 9.00021 4.83329Z" fill="currentColor"></path>
              </svg>
              <span>Support Center</span>
            </a>
          </li>
          <li>
            <a class="py-3 is-flex is-align-items-center has-background-dark has-text-white" href="#">
              <svg class="mr-3 has-text-grey-dark" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.8802 0.666626H3.2135C2.55068 0.667349 1.91522 0.930974 1.44653 1.39966C0.977849 1.86834 0.714224 2.50381 0.713501 3.16663V14.8333C0.714224 15.4961 0.977849 16.1316 1.44653 16.6003C1.91522 17.0689 2.55068 17.3326 3.2135 17.3333H14.8802C15.543 17.3326 16.1785 17.0689 16.6471 16.6003C17.1158 16.1316 17.3794 15.4961 17.3802 14.8333V3.16663C17.3794 2.50381 17.1158 1.86834 16.6471 1.39966C16.1785 0.930974 15.543 0.667349 14.8802 0.666626ZM3.2135 2.33329H14.8802C15.1011 2.33351 15.3129 2.42138 15.4692 2.57761C15.6254 2.73385 15.7133 2.94568 15.7135 3.16663V9.83329H13.6595C13.385 9.83307 13.1148 9.90072 12.8729 10.0302C12.6309 10.1597 12.4248 10.347 12.2728 10.5755L11.1009 12.3333H6.9928L5.82093 10.5755C5.6689 10.347 5.46273 10.1597 5.22079 10.0302C4.97884 9.90072 4.70863 9.83307 4.43421 9.83329H2.38017V3.16663C2.38039 2.94568 2.46826 2.73385 2.62449 2.57761C2.78072 2.42138 2.99255 2.33351 3.2135 2.33329ZM14.8802 15.6666H3.2135C2.99255 15.6664 2.78072 15.5785 2.62449 15.4223C2.46826 15.2661 2.38039 15.0542 2.38017 14.8333V11.5H4.43421L5.60608 13.2578C5.75811 13.4862 5.96428 13.6736 6.20622 13.803C6.44817 13.9325 6.71838 14.0002 6.9928 14H11.1009C11.3753 14.0002 11.6455 13.9325 11.8875 13.803C12.1294 13.6736 12.3356 13.4862 12.4876 13.2578L13.6595 11.5H15.7135V14.8333C15.7133 15.0542 15.6254 15.2661 15.4692 15.4223C15.3129 15.5785 15.1011 15.6664 14.8802 15.6666Z" fill="currentColor"></path>
              </svg>
              <span>Inbox</span>
            </a>
          </li>
          <li>
            <a class="py-3 is-flex is-align-items-center has-background-dark has-text-white">
              <svg class="mr-3 has-text-grey-dark" width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.9831 6.64169C18.9047 6.545 18.8056 6.46712 18.6931 6.41376C18.5806 6.36041 18.4576 6.33293 18.3331 6.33335H16.6665V5.50002C16.6665 4.83698 16.4031 4.20109 15.9342 3.73225C15.4654 3.26341 14.8295 3.00002 14.1665 3.00002H8.93313L8.66646 2.16669C8.49359 1.67771 8.17292 1.2546 7.74888 0.955986C7.32484 0.657367 6.81843 0.498019 6.2998 0.500019H3.33313C2.67009 0.500019 2.0342 0.763411 1.56536 1.23225C1.09652 1.70109 0.83313 2.33698 0.83313 3.00002V13C0.83313 13.6631 1.09652 14.2989 1.56536 14.7678C2.0342 15.2366 2.67009 15.5 3.33313 15.5H15.3331C15.9008 15.4984 16.451 15.3036 16.8933 14.9476C17.3355 14.5917 17.6435 14.0959 17.7665 13.5417L19.1665 7.35002C19.1918 7.22578 19.1885 7.0974 19.1567 6.97466C19.1249 6.85191 19.0656 6.73803 18.9831 6.64169ZM4.4748 13.1834C4.43246 13.3713 4.32629 13.5388 4.17435 13.6574C4.02241 13.7759 3.8341 13.8381 3.64146 13.8334H3.33313C3.11212 13.8334 2.90015 13.7456 2.74387 13.5893C2.58759 13.433 2.4998 13.221 2.4998 13V3.00002C2.4998 2.779 2.58759 2.56704 2.74387 2.41076C2.90015 2.25448 3.11212 2.16669 3.33313 2.16669H6.2998C6.48152 2.1572 6.66135 2.20746 6.81183 2.30978C6.9623 2.4121 7.07515 2.56087 7.13313 2.73335L7.58313 4.10002C7.6366 4.25897 7.7368 4.39809 7.8706 4.49919C8.00441 4.60029 8.16561 4.65867 8.33313 4.66669H14.1665C14.3875 4.66669 14.5994 4.75448 14.7557 4.91076C14.912 5.06704 14.9998 5.27901 14.9998 5.50002V6.33335H6.66646C6.47383 6.32864 6.28551 6.39084 6.13358 6.50935C5.98164 6.62786 5.87546 6.79537 5.83313 6.98335L4.4748 13.1834ZM16.1415 13.1834C16.0991 13.3713 15.993 13.5388 15.841 13.6574C15.6891 13.7759 15.5008 13.8381 15.3081 13.8334H6.00813C6.05117 13.7405 6.08198 13.6425 6.0998 13.5417L7.33313 8.00002H17.3331L16.1415 13.1834Z" fill="currentColor"></path>
              </svg>
              <span>File Manager</span>
            </a>
          </li>
          <li>
            <a class="py-3 is-flex is-align-items-center has-background-dark has-text-white">
              <svg class="mr-3 has-text-grey-dark" width="18" height="10" viewbox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.09182 8.575C2.01257 8.49913 1.91911 8.43966 1.81682 8.4C1.61394 8.31665 1.38637 8.31665 1.18349 8.4C1.08119 8.43966 0.98774 8.49913 0.908486 8.575C0.832619 8.65425 0.773148 8.74771 0.733486 8.85C0.66967 9.00176 0.652235 9.16902 0.68338 9.33068C0.714525 9.49234 0.792855 9.64115 0.908486 9.75833C0.989487 9.83194 1.0825 9.89113 1.18349 9.93333C1.28324 9.97742 1.39109 10.0002 1.50015 10.0002C1.60921 10.0002 1.71707 9.97742 1.81682 9.93333C1.91781 9.89113 2.01082 9.83194 2.09182 9.75833C2.20745 9.64115 2.28578 9.49234 2.31693 9.33068C2.34807 9.16902 2.33064 9.00176 2.26682 8.85C2.22716 8.74771 2.16769 8.65425 2.09182 8.575ZM4.83349 1.66667H16.5002C16.7212 1.66667 16.9331 1.57887 17.0894 1.42259C17.2457 1.26631 17.3335 1.05435 17.3335 0.833333C17.3335 0.61232 17.2457 0.400358 17.0894 0.244078C16.9331 0.0877975 16.7212 0 16.5002 0H4.83349C4.61247 0 4.40051 0.0877975 4.24423 0.244078C4.08795 0.400358 4.00015 0.61232 4.00015 0.833333C4.00015 1.05435 4.08795 1.26631 4.24423 1.42259C4.40051 1.57887 4.61247 1.66667 4.83349 1.66667ZM2.09182 4.40833C1.97463 4.2927 1.82582 4.21437 1.66416 4.18323C1.50251 4.15208 1.33525 4.16952 1.18349 4.23333C1.0825 4.27554 0.989487 4.33472 0.908486 4.40833C0.832619 4.48759 0.773148 4.58104 0.733486 4.68333C0.689399 4.78308 0.666626 4.89094 0.666626 5C0.666626 5.10906 0.689399 5.21692 0.733486 5.31667C0.775688 5.41765 0.834877 5.51067 0.908486 5.59167C0.989487 5.66528 1.0825 5.72447 1.18349 5.76667C1.28324 5.81075 1.39109 5.83353 1.50015 5.83353C1.60921 5.83353 1.71707 5.81075 1.81682 5.76667C1.91781 5.72447 2.01082 5.66528 2.09182 5.59167C2.16543 5.51067 2.22462 5.41765 2.26682 5.31667C2.31091 5.21692 2.33368 5.10906 2.33368 5C2.33368 4.89094 2.31091 4.78308 2.26682 4.68333C2.22716 4.58104 2.16769 4.48759 2.09182 4.40833ZM16.5002 4.16667H4.83349C4.61247 4.16667 4.40051 4.25446 4.24423 4.41074C4.08795 4.56703 4.00015 4.77899 4.00015 5C4.00015 5.22101 4.08795 5.43298 4.24423 5.58926C4.40051 5.74554 4.61247 5.83333 4.83349 5.83333H16.5002C16.7212 5.83333 16.9331 5.74554 17.0894 5.58926C17.2457 5.43298 17.3335 5.22101 17.3335 5C17.3335 4.77899 17.2457 4.56703 17.0894 4.41074C16.9331 4.25446 16.7212 4.16667 16.5002 4.16667ZM2.09182 0.241667C2.01257 0.165799 1.91911 0.106329 1.81682 0.0666666C1.66506 0.00285041 1.4978 -0.0145849 1.33614 0.0165602C1.17448 0.0477053 1.02567 0.126035 0.908486 0.241667C0.834877 0.322667 0.775688 0.415679 0.733486 0.516667C0.689399 0.616417 0.666626 0.724274 0.666626 0.833333C0.666626 0.942392 0.689399 1.05025 0.733486 1.15C0.775688 1.25099 0.834877 1.344 0.908486 1.425C0.989487 1.49861 1.0825 1.5578 1.18349 1.6C1.33525 1.66382 1.50251 1.68125 1.66416 1.65011C1.82582 1.61896 1.97463 1.54063 2.09182 1.425C2.16543 1.344 2.22462 1.25099 2.26682 1.15C2.31091 1.05025 2.33368 0.942392 2.33368 0.833333C2.33368 0.724274 2.31091 0.616417 2.26682 0.516667C2.22462 0.415679 2.16543 0.322667 2.09182 0.241667ZM16.5002 8.33333H4.83349C4.61247 8.33333 4.40051 8.42113 4.24423 8.57741C4.08795 8.73369 4.00015 8.94565 4.00015 9.16667C4.00015 9.38768 4.08795 9.59964 4.24423 9.75592C4.40051 9.9122 4.61247 10 4.83349 10H16.5002C16.7212 10 16.9331 9.9122 17.0894 9.75592C17.2457 9.59964 17.3335 9.38768 17.3335 9.16667C17.3335 8.94565 17.2457 8.73369 17.0894 8.57741C16.9331 8.42113 16.7212 8.33333 16.5002 8.33333Z" fill="currentColor"></path>
              </svg>
              <span>Data List</span>
            </a>
          </li>
        </ul>
        <ul class="mb-2 menu-list is-size-6">
          <li>
            <a class="py-3 is-flex is-align-items-center has-background-dark has-text-white" href="#">
              <svg class="mr-3 has-text-grey-dark" width="14" height="17" viewbox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.7666 6.9583L15.1916 6.4333L15.9333 4.94996C16.0085 4.7947 16.0336 4.61993 16.0053 4.44977C15.9769 4.27961 15.8964 4.12245 15.775 3.99996L14 2.22496C13.8768 2.1017 13.7182 2.02013 13.5463 1.99173C13.3743 1.96333 13.1979 1.98953 13.0416 2.06663L11.5583 2.8083L11.0333 1.2333C10.9778 1.06912 10.8726 0.926317 10.7322 0.824752C10.5918 0.723187 10.4232 0.667916 10.25 0.666629H7.74996C7.57526 0.666178 7.40483 0.720645 7.26277 0.82233C7.12071 0.924016 7.0142 1.06778 6.9583 1.2333L6.4333 2.8083L4.94996 2.06663C4.7947 1.99145 4.61993 1.9663 4.44977 1.99466C4.27961 2.02302 4.12245 2.10349 3.99996 2.22496L2.22496 3.99996C2.1017 4.1231 2.02013 4.28177 1.99173 4.45368C1.96333 4.62558 1.98953 4.80205 2.06663 4.9583L2.8083 6.44163L1.2333 6.96663C1.06912 7.02208 0.926317 7.12732 0.824752 7.26772C0.723187 7.40812 0.667916 7.57668 0.666629 7.74996V10.25C0.666178 10.4247 0.720645 10.5951 0.82233 10.7372C0.924016 10.8792 1.06778 10.9857 1.2333 11.0416L2.8083 11.5666L2.06663 13.05C1.99145 13.2052 1.9663 13.38 1.99466 13.5502C2.02302 13.7203 2.10349 13.8775 2.22496 14L3.99996 15.775C4.1231 15.8982 4.28177 15.9798 4.45368 16.0082C4.62558 16.0366 4.80205 16.0104 4.9583 15.9333L6.44163 15.1916L6.96663 16.7666C7.02253 16.9321 7.12904 17.0759 7.2711 17.1776C7.41317 17.2793 7.58359 17.3337 7.7583 17.3333H10.2583C10.433 17.3337 10.6034 17.2793 10.7455 17.1776C10.8875 17.0759 10.9941 16.9321 11.05 16.7666L11.575 15.1916L13.0583 15.9333C13.2126 16.0066 13.3856 16.0307 13.5541 16.0024C13.7225 15.9741 13.8781 15.8947 14 15.775L15.775 14C15.8982 13.8768 15.9798 13.7182 16.0082 13.5463C16.0366 13.3743 16.0104 13.1979 15.9333 13.0416L15.1916 11.5583L16.7666 11.0333C16.9308 10.9778 17.0736 10.8726 17.1752 10.7322C17.2767 10.5918 17.332 10.4232 17.3333 10.25V7.74996C17.3337 7.57526 17.2793 7.40483 17.1776 7.26277C17.0759 7.12071 16.9321 7.0142 16.7666 6.9583ZM15.6666 9.64996L14.6666 9.9833C14.4367 10.0579 14.2257 10.1816 14.0483 10.3459C13.871 10.5102 13.7315 10.711 13.6395 10.9346C13.5475 11.1582 13.5053 11.3991 13.5158 11.6406C13.5262 11.8821 13.5891 12.1185 13.7 12.3333L14.175 13.2833L13.2583 14.2L12.3333 13.7C12.1196 13.5935 11.8855 13.5342 11.6469 13.526C11.4083 13.5179 11.1707 13.5611 10.9502 13.6528C10.7298 13.7445 10.5316 13.8824 10.3691 14.0573C10.2066 14.2322 10.0835 14.44 10.0083 14.6666L9.67496 15.6666H8.34996L8.01663 14.6666C7.94204 14.4367 7.81832 14.2257 7.65404 14.0483C7.48977 13.871 7.28888 13.7315 7.06531 13.6395C6.84174 13.5475 6.60084 13.5053 6.35932 13.5158C6.11779 13.5262 5.88143 13.5891 5.66663 13.7L4.71663 14.175L3.79996 13.2583L4.29996 12.3333C4.41087 12.1185 4.47373 11.8821 4.48417 11.6406C4.49461 11.3991 4.45238 11.1582 4.36041 10.9346C4.26845 10.711 4.12894 10.5102 3.95158 10.3459C3.77422 10.1816 3.56325 10.0579 3.3333 9.9833L2.3333 9.64996V8.34996L3.3333 8.01663C3.56325 7.94204 3.77422 7.81832 3.95158 7.65404C4.12894 7.48977 4.26845 7.28888 4.36041 7.06531C4.45238 6.84174 4.49461 6.60084 4.48417 6.35932C4.47373 6.11779 4.41087 5.88143 4.29996 5.66663L3.82496 4.74163L4.74163 3.82496L5.66663 4.29996C5.88143 4.41087 6.11779 4.47373 6.35932 4.48417C6.60084 4.49461 6.84174 4.45238 7.06531 4.36041C7.28888 4.26845 7.48977 4.12894 7.65404 3.95158C7.81832 3.77422 7.94204 3.56325 8.01663 3.3333L8.34996 2.3333H9.64996L9.9833 3.3333C10.0579 3.56325 10.1816 3.77422 10.3459 3.95158C10.5102 4.12894 10.711 4.26845 10.9346 4.36041C11.1582 4.45238 11.3991 4.49461 11.6406 4.48417C11.8821 4.47373 12.1185 4.41087 12.3333 4.29996L13.2833 3.82496L14.2 4.74163L13.7 5.66663C13.5935 5.88033 13.5342 6.11442 13.526 6.35304C13.5179 6.59165 13.5611 6.82924 13.6528 7.0497C13.7445 7.27016 13.8824 7.46835 14.0573 7.63086C14.2322 7.79337 14.44 7.9164 14.6666 7.99163L15.6666 8.32496V9.64996ZM8.99996 5.66663C8.34069 5.66663 7.69623 5.86213 7.14806 6.2284C6.5999 6.59467 6.17266 7.11526 5.92036 7.72435C5.66807 8.33344 5.60206 9.00366 5.73068 9.65026C5.8593 10.2969 6.17676 10.8908 6.64294 11.357C7.10911 11.8232 7.70306 12.1406 8.34966 12.2692C8.99626 12.3979 9.66649 12.3319 10.2756 12.0796C10.8847 11.8273 11.4053 11.4 11.7715 10.8519C12.1378 10.3037 12.3333 9.65923 12.3333 8.99996C12.3333 8.11591 11.9821 7.26806 11.357 6.64294C10.7319 6.01782 9.88402 5.66663 8.99996 5.66663ZM8.99996 10.6666C8.67033 10.6666 8.34809 10.5689 8.07401 10.3857C7.79993 10.2026 7.58631 9.94231 7.46016 9.63777C7.33402 9.33322 7.30101 8.99811 7.36532 8.67481C7.42963 8.35151 7.58836 8.05454 7.82145 7.82145C8.05454 7.58836 8.35151 7.42963 8.67481 7.36532C8.99811 7.30101 9.33322 7.33402 9.63777 7.46016C9.94231 7.58631 10.2026 7.79993 10.3857 8.07401C10.5689 8.34809 10.6666 8.67033 10.6666 8.99996C10.6666 9.44199 10.491 9.86591 10.1785 10.1785C9.86591 10.491 9.44199 10.6666 8.99996 10.6666Z" fill="currentColor"></path>
              </svg>
              <span>Settings</span>
            </a>
          </li>
          <li>
            <a class="py-3 is-flex is-align-items-center has-background-dark has-text-white" href="#">
              <svg class="mr-3 has-text-grey-dark" width="14" height="16" viewbox="0 0 14 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.333618 8.99996C0.333618 9.22097 0.421416 9.43293 0.577696 9.58922C0.733976 9.7455 0.945938 9.83329 1.16695 9.83329H7.49195L5.57528 11.7416C5.49718 11.8191 5.43518 11.9113 5.39287 12.0128C5.35057 12.1144 5.32879 12.2233 5.32879 12.3333C5.32879 12.4433 5.35057 12.5522 5.39287 12.6538C5.43518 12.7553 5.49718 12.8475 5.57528 12.925C5.65275 13.0031 5.74492 13.0651 5.84647 13.1074C5.94802 13.1497 6.05694 13.1715 6.16695 13.1715C6.27696 13.1715 6.38588 13.1497 6.48743 13.1074C6.58898 13.0651 6.68115 13.0031 6.75862 12.925L10.0919 9.59163C10.1678 9.51237 10.2273 9.41892 10.2669 9.31663C10.3503 9.11374 10.3503 8.88618 10.2669 8.68329C10.2273 8.581 10.1678 8.48755 10.0919 8.40829L6.75862 5.07496C6.68092 4.99726 6.58868 4.93563 6.48716 4.89358C6.38564 4.85153 6.27683 4.82988 6.16695 4.82988C6.05707 4.82988 5.94826 4.85153 5.84674 4.89358C5.74522 4.93563 5.65298 4.99726 5.57528 5.07496C5.49759 5.15266 5.43595 5.2449 5.3939 5.34642C5.35185 5.44794 5.33021 5.55674 5.33021 5.66663C5.33021 5.77651 5.35185 5.88532 5.3939 5.98683C5.43595 6.08835 5.49759 6.18059 5.57528 6.25829L7.49195 8.16663H1.16695C0.945938 8.16663 0.733976 8.25442 0.577696 8.4107C0.421416 8.56698 0.333618 8.77895 0.333618 8.99996V8.99996ZM11.1669 0.666626H2.83362C2.17058 0.666626 1.53469 0.930018 1.06585 1.39886C0.59701 1.8677 0.333618 2.50358 0.333618 3.16663V5.66663C0.333618 5.88764 0.421416 6.0996 0.577696 6.25588C0.733976 6.41216 0.945938 6.49996 1.16695 6.49996C1.38797 6.49996 1.59993 6.41216 1.75621 6.25588C1.91249 6.0996 2.00028 5.88764 2.00028 5.66663V3.16663C2.00028 2.94561 2.08808 2.73365 2.24436 2.57737C2.40064 2.42109 2.6126 2.33329 2.83362 2.33329H11.1669C11.388 2.33329 11.5999 2.42109 11.7562 2.57737C11.9125 2.73365 12.0003 2.94561 12.0003 3.16663V14.8333C12.0003 15.0543 11.9125 15.2663 11.7562 15.4225C11.5999 15.5788 11.388 15.6666 11.1669 15.6666H2.83362C2.6126 15.6666 2.40064 15.5788 2.24436 15.4225C2.08808 15.2663 2.00028 15.0543 2.00028 14.8333V12.3333C2.00028 12.1123 1.91249 11.9003 1.75621 11.744C1.59993 11.5878 1.38797 11.5 1.16695 11.5C0.945938 11.5 0.733976 11.5878 0.577696 11.744C0.421416 11.9003 0.333618 12.1123 0.333618 12.3333V14.8333C0.333618 15.4963 0.59701 16.1322 1.06585 16.6011C1.53469 17.0699 2.17058 17.3333 2.83362 17.3333H11.1669C11.83 17.3333 12.4659 17.0699 12.9347 16.6011C13.4036 16.1322 13.6669 15.4963 13.6669 14.8333V3.16663C13.6669 2.50358 13.4036 1.8677 12.9347 1.39886C12.4659 0.930018 11.83 0.666626 11.1669 0.666626Z" fill="currentColor"></path>
              </svg>
              <span>Log Out</span>
            </a>
          </li>
        </ul>
      </aside>
    </div>
  </div>
</section>

Navigation (horizontal) from Yofte

Bulma

Yofte

<section class="is-relative has-background-light is-clipped">
  <nav class="navbar has-background-light" style="border-bottom: 1px solid #CFD5E2">
    <div class="navbar-brand is-align-items-center">
      <a class="navbar-item is-size-4" href="#">
        <img class="image" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
      </a>
      <a class="navbar-burger navbar-menu-open is-flex-touch is-align-items-center is-justify-content-center" role="button">
        <svg class="has-text-dark" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 15.4688H0V17.7207H18V15.4688Z" fill="currentColor"></path>
          <path d="M11.0226 7.87402H0V10.126H11.0226V7.87402Z" fill="currentColor"></path>
          <path d="M18 0.279297H0V2.53127H18V0.279297Z" fill="currentColor"></path>
        </svg>
      </a>
    </div>
    <div class="navbar-menu ml-10 is-align-items-center">
      <div class="navbar-start" style="width: 100%;">
        <div class="mr-10 pl-8 pr-6 is-hidden-touch-only is-hidden-desktop-only is-hidden-widescreen-only is-flex-fullhd has-background-white is-align-items-center" style="border-radius: 6px;">
          <svg class="mr-2 is-flex-shrink-0" style="width: 24px; height: 18px;" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.5 17.1309L12.5042 11.9551" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.27524 13.8672C10.8789 13.8672 13.8002 10.945 13.8002 7.34033C13.8002 3.73565 10.8789 0.813477 7.27524 0.813477C3.67159 0.813477 0.750244 3.73565 0.750244 7.34033C0.750244 10.945 3.67159 13.8672 7.27524 13.8672Z" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <input class="input mr-2 has-background-white" style="border: none; box-shadow: none;" type="text" placeholder="">
          <select class="pl-6 py-3 has-background-white" style="border: none; border-left: 1px solid #E8E8E8; box-shadow: none;" name="">
            <option>All items</option>
            <option>Collection</option>
            <option>Option</option>
          </select>
        </div>
        <a class="navbar-item ml-auto" href="#">Category</a><a class="navbar-item" href="#">Collection</a><a class="navbar-item" href="#">Story</a><a class="navbar-item mr-auto" href="#">Brand</a>
      </div>
      <div class="navbar-end">
        <a class="navbar-item is-flex" href="#">
          <svg width="23" height="20" viewbox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.4998 19.2061L2.70115 9.92527C1.92859 9.14433 1.41864 8.1374 1.24355 7.04712C1.06847 5.95684 1.23713 4.8385 1.72563 3.85053V3.85053C2.09464 3.10462 2.63366 2.45803 3.29828 1.96406C3.9629 1.47008 4.73408 1.14284 5.5483 1.00931C6.36252 0.875782 7.19647 0.939779 7.98144 1.19603C8.7664 1.45228 9.47991 1.89345 10.0632 2.48319L11.4998 3.93577L12.9364 2.48319C13.5197 1.89345 14.2332 1.45228 15.0182 1.19603C15.8031 0.939779 16.6371 0.875782 17.4513 1.00931C18.2655 1.14284 19.0367 1.47008 19.7013 1.96406C20.3659 2.45803 20.905 3.10462 21.274 3.85053V3.85053C21.7625 4.8385 21.9311 5.95684 21.756 7.04712C21.581 8.1374 21.071 9.14433 20.2984 9.92527L11.4998 19.2061Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
        <a class="navbar-item is-flex is-align-items-center" href="#">
          <svg class="mr-3" width="23" height="23" viewbox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="is-inline-flex is-align-items-center is-justify-content-center has-background-white has-text-weight-bold" style="width: 24px; height: 24px; border-radius: 50% !important;">3</span>
        </a>
        <a class="navbar-item pr-10 is-flex is-align-items-center is-align-self-stretch has-text-weight-bold" href="#">
          <svg class="mr-3" width="32" height="31" viewbox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span>Sign In</span>
        </a>
      </div>
    </div>
  </nav>
  <div class="navbar-side has-mw-sm is-hidden is-fixed is-top-0 is-bottom-0 is-left-0 is-right-0" style="z-index: 9999; width: 100%;">
    <div class="navbar-backdrop is-fixed is-top-0 is-bottom-0 is-left-0 has-background-dark is-fullwidth" style="height: 100%; width: 100%; opacity: 25%;"></div>
    <nav class="px-6 py-6 is-flex is-relative has-background-white is-flex-direction-column is-fullwidth" style="height: 100%; width: 100%;">
      <div class="mb-8 is-flex is-align-items-center">
        <a class="mr-auto is-size-4" href="#">
          <img class="image" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
        </a>
        <button class="navbar-close button p-0" style="border: none;">
          <svg style="width: 8px; height: 8px;" width="10" height="10" viewbox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.00002 1L1 9.00002M1.00003 1L9.00005 9.00002" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="mb-8 is-flex is-justify-content-space-between">
        <a class="navbar-item p-0 is-inline-flex is-align-items-center has-text-weight-bold" href="#">
          <svg class="mr-3" width="32" height="31" viewbox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span>Sign In</span>
        </a>
        <div class="is-flex is-align-items-center">
          <a class="navbar-item p-0 mr-6" href="#">
            <svg width="23" height="20" viewbox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.4998 19.2061L2.70115 9.92527C1.92859 9.14433 1.41864 8.1374 1.24355 7.04712C1.06847 5.95684 1.23713 4.8385 1.72563 3.85053V3.85053C2.09464 3.10462 2.63366 2.45803 3.29828 1.96406C3.9629 1.47008 4.73408 1.14284 5.5483 1.00931C6.36252 0.875782 7.19647 0.939779 7.98144 1.19603C8.7664 1.45228 9.47991 1.89345 10.0632 2.48319L11.4998 3.93577L12.9364 2.48319C13.5197 1.89345 14.2332 1.45228 15.0182 1.19603C15.8031 0.939779 16.6371 0.875782 17.4513 1.00931C18.2655 1.14284 19.0367 1.47008 19.7013 1.96406C20.3659 2.45803 20.905 3.10462 21.274 3.85053V3.85053C21.7625 4.8385 21.9311 5.95684 21.756 7.04712C21.581 8.1374 21.071 9.14433 20.2984 9.92527L11.4998 19.2061Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <a class="navbar-item p-0 is-flex is-align-items-center" href="#">
            <svg class="mr-3" width="23" height="23" viewbox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="is-inline-block has-background-light is-rounded has-text-weight-bold has-text-centered" style="width: 24px; height: 24px; border-radius: 50% !important;">3</span>
          </a>
        </div>
      </div>
      <input class="input mb-10 has-background-light" style="border: none;" type="search" placeholder="Search">
      <ul class="mb-0 is-size-4">
        <li class="mb-8"><a class="has-text-dark has-text-weight-semibold is-size-4" href="#">Category</a></li>
        <li class="mb-8"><a class="has-text-dark has-text-weight-semibold is-size-4" href="#">Collection</a></li>
        <li class="mb-8"><a class="has-text-dark has-text-weight-semibold is-size-4" href="#">Story</a></li>
        <li><a class="has-text-dark has-text-weight-semibold is-size-4" href="#">Brand</a></li>
      </ul>
    </nav>
  </div>
</section>

Navigation (horizontal) from Pstls.

Bulma

Pstls.

<section class="is-relative">
  <nav class="navbar py-8">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="#">
          <img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="116">
        </a>
        <div class="navbar-item ml-auto is-hidden-desktop">
          <button class="button is-ghost navbar-menu-open">
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#000"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start"><a class="navbar-item is-size-5 has-text-weight-bold" aria-current="page" href="#">Home</a><a class="navbar-item is-size-5 has-text-weight-bold" href="#">Products</a><a class="navbar-item is-size-5 has-text-weight-bold" href="#">Resources</a><a class="navbar-item is-size-5 has-text-weight-bold" href="#">Pricing</a></div>
        <div class="navbar-end">
          <div class="navbar-item">
            <div class="buttons"><a class="button is-ghost has-text-dark has-text-weight-bold" href="#">Log In</a><a class="button is-dark" href="#">Sign Up</a></div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div class="navbar-side is-hidden has-mw-md is-fixed is-top-0 is-bottom-0 is-left-0" style="z-index: 9999; width: 100%;">
    <div class="navbar-backdrop is-fixed is-top-0 is-bottom-0 is-left-0 is-right-0 has-background-black" style="opacity: 75%;"></div>
    <nav class="px-6 py-10 is-flex is-relative has-background-white is-flex-direction-column is-fullwidth is-covered" style="height: 100%; overflow-y: auto;">
      <div class="mb-12 is-vcentered is-flex is-align-items-center">
        <a class="mb-0 mr-auto is-size-4" href="#">
          <img src="pstls-assets/logos/pstls-logo-md-success.svg" alt="" width="102">
        </a>
        <button class="button is-ghost p-0 navbar-close" type="button" aria-label="Close">
          <img src="pstls-assets/images/navigations/x2.svg" alt="">
        </button>
      </div>
      <div>
        <ul class="is-flex-direction-column">
          <li class="navbar-item py-3"><a class="is-size-5 has-text-dark has-text-weight-bold" href="#">Home</a></li>
          <li class="navbar-item py-3"><a class="is-size-5 has-text-dark has-text-weight-bold" href="#">Products</a></li>
          <li class="navbar-item py-3"><a class="is-size-5 has-text-dark has-text-weight-bold" href="#">Resources</a></li>
          <li class="navbar-item py-3"><a class="is-size-5 has-text-dark has-text-weight-bold" href="#">Pricing</a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <div class="py-6"><a class="button is-ghost has-text-dark is-fullwidth" href="#">Log In</a><a class="button is-dark is-fullwidth" href="#">Sign Up</a></div>
      </div>
    </nav>
  </div>
</section>

Navigation (horizontal) from Acros

Bulma

Acros

<section>
  <nav class="navbar py-2 has-background-grey-darker">
    <div class="container px-8-mobile">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="px-0 title is-size-4 has-text-white">
            <img src="acros-assets/logo/logo-acros-white.svg" width="auto" style="max-height: initial;" alt="">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start">
          <ul class="navbar-item pl-0">
            <li><a class="title is-size-6 has-text-white has-text-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-white has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-white has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-white has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
          </ul>
        </div>
        <div class="navbar-end">
          <div class="navbar-item">
            <div class="control has-icons-right">
              <input class="input has-background-grey-dark pl-4 pr-12" style="border: none; height: 56px;" placeholder="Search here">
              <span class="icon is-right pr-4" style="height: 100%;">
                <img src="acros-assets/icons/navigations/search-white.svg" alt="">
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div class="navbar-side is-hidden is-fixed is-top-0 is-left-0 has-background-blur" style="z-index: 50; width:100%; height: 100%;">
    <div class="is-absolute" style="z-index: -1;"></div>
    <div class="container is-relative">
      <a class="navbar-close is-absolute is-right-0 mt-6 mr-6" href="#">
        <img src="acros-assets/icons/mobile-decline.svg" alt="">
      </a>
    </div>
    <aside class="py-6 px-6 pb-8 has-background-white is-flex is-flex-direction-column is-justify-content-space-between" style="height: 100%; width: 288px; overflow-y: auto">
      <div class="mb-8">
        <a class="navbar-item title is-size-4 has-text-dark pl-4 mb-5" href="#">
          <img src="acros-assets/logo/logo-acros-black.svg" width="auto" style="max-height: initial" alt="">
        </a>
        <div class="control has-icons-right mb-8">
          <input class="input has-background-white-ter pl-4 pr-12" style="border: none; height: 56px;" placeholder="Search here">
          <span class="icon is-right pr-4" style="height: 100%;">
            <img src="acros-assets/icons/navigations/search-black.svg" alt="">
          </span>
        </div>
        <ul class="menu-list title is-size-6">
          <li><a class="py-4 px-6 has-text-grey-darker" href="#">About</a></li>
          <li><a class="py-4 px-6 has-text-grey-darker" href="#">Company</a></li>
          <li><a class="py-4 px-6 has-text-grey-darker" href="#">Services</a></li>
          <li><a class="py-4 px-6 has-text-grey-darker" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div><small class="has-text-grey-darker ml-6">2021 &copy; Shuffle</small></div>
    </aside>
  </div>
</section>

Navigation (horizontal) from Bendis

Bulma

Bendis

<div>
  <nav class="is-relative navbar py-2 has-background-primary">
    <div class="navbar-brand is-align-items-center">
      <a class="navbar-item" href="#">
        <span class="navbar-item px-0 title is-size-5 has-text-dark">
          <img src="bendis-assets/logos/bendis-light.svg" alt="" style="max-height: initial;">
        </span>
      </a>
      <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="2" fill="white"></rect><rect x="2" y="11" width="20" height="2" fill="white"></rect><rect x="2" y="16" width="20" height="2" fill="white"></rect></svg>
      </a>
    </div>
    <div class="is-hidden-mobile is-hidden-tablet-only is-absolute" style="top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);">
      <ul class="navbar-item">
        <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">About</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Company</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Services</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Testimonials</a></li>
      </ul>
    </div>
    <div class="navbar-menu is-hidden-mobile">
      <div class="navbar-end"><a class="navbar-item has-text-white" href="#">Sign In</a><a class="navbar-item has-text-white" href="#">Support</a></div>
    </div>
  </nav>
  <div class="is-hidden navbar-side is-fixed is-top-0 is-bottom-0 is-left-0 has-mw-md" style="width: 75%; z-index: 9999;">
    <div class="navbar-backdrop is-fixed is-inset-0 has-background-dark" style="opacity: 75%; z-index: 50;"></div>
    <aside class="menu is-relative is-flex is-flex-direction-column py-8 px-10 has-background-white" style="width: 100%; height: 100%; z-index: 50; overflow-y: auto;">
      <a class="mb-20" href="#">
        <span class="navbar-item px-0 title is-5 has-text-dark">
          <img src="bendis-assets/logos/bendis-blue.svg" style="max-height: initial" alt="">
        </span>
      </a>
      <ul class="mb-40">
        <li><a class="button is-ghost has-text-left has-text-primary" href="#">About</a></li>
        <li><a class="button is-ghost has-text-left has-text-primary" href="#">Company</a></li>
        <li><a class="button is-ghost has-text-left has-text-primary" href="#">Services</a></li>
        <li><a class="button is-ghost has-text-left has-text-primary" href="#">Testimonials</a></li>
      </ul>
      <div class="mb-8"><a class="button is-ghost has-text-primary is-fullwidth" href="#">Sign In</a><a class="button is-outlined is-primary is-fullwidth" href="#">Sign up</a></div>
      <small class="has-text-centered has-text-primary">All rights reserved &copy; Wireframes Corporation 2022</small>
    </aside>
  </div>
</div>

Navigation (horizontal) from Metis

Bulma

Metis

<section>
  <nav class="navbar is-transparent py-3" aria-label="main navigation">
    <div class="navbar-brand is-fullwidth">
      <a class="navbar-item mx-auto" href="#">
        <img src="metis-assets/logos/metis/metis.svg" alt="" width="auto" style="min-height: 40px;">
      </a>
    </div>
  </nav>
</section>

Navigation (horizontal) from Cronos

Bulma

Cronos

<nav class="navbar has-background-white py-5">
  <div class="navbar-brand mx-auto">
    <a class="navbar-item mx-auto title is-size-4 px-0" href="#">
      <img class="image is-fullwidth" src="cronos-assets/logos/cronos-logo.svg" alt="alt" width="132">
    </a>
  </div>
</nav>

Navigation (horizontal) from Plain

Bulma

Plain

<nav class="navbar py-4">
  <div class="container">
    <div class="navbar-brand mx-auto">
      <a class="navbar-item" href="#">
        <img class="image" src="bulma-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
      </a>
    </div>
  </div>
</nav>

Navigation (horizontal) from asitrastudio

Bulma

asitrastudio

<section class="is-relative" x-data="{ mobileNavOpen: false }">
  <nav class="navbar py-2 is-white" role="navigation" aria-label="navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img class="image" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="is-hidden-desktop is-inline-flex is-align-items-center is-justify-content-center navbar-menu-open navbar-burger" href="#">
        <svg width="38" height="16" viewbox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="44" height="2" rx="1" fill="black"></rect><rect y="14" width="44" height="2" rx="1" fill="black"></rect></svg>
      </button>
    </div>
    <div class="navbar-menu" id="navExample">
      <div class="navbar-end">
        <a class="navbar-item">About</a><a class="navbar-item">Services</a><a class="navbar-item">Projects</a><a class="navbar-item">Contact us</a>
        <div class="navbar-item">
          <a class="button is-outlined is-rounded is-dark is-flex is-align-items-center" href="#">
            <span class="mr-3">Get consulation</span>
            <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{ 'is-block': mobileNavOpen, 'is-hidden': !mobileNavOpen }" class="is-hidden navbar-side is-fixed is-top-0 is-bottom-0 is-left-0 has-mw-sm" style="width: 75%; z-index: 9999;">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="is-fixed is-inset-0 has-background-dark" style="opacity: 75%; z-index: 50;"></div>
    <aside class="menu is-relative is-flex is-flex-direction-column pb-6 px-6 has-background-white" style="width: 100%; height: 100%; z-index: 50; overflow-y: auto;">
      <div class="is-flex is-align-items-center mb-10">
        <a class="mr-auto mb-0" href="#">
          <span class="navbar-item px-0 title is-5 has-text-dark">
            <img src="asitrastudio-assets/logos/logo-asi.svg" alt="" style="height: 21px;" width="auto">
          </span>
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button is-text p-0 mb-2" type="button" aria-label="Close">
          <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <ul class="menu-list is-size-7">
        <li class="mb-2"><a class="has-background-white has-text-dark" href="#">About</a></li>
        <li class="mb-2"><a class="has-background-white has-text-dark" href="#">Services</a></li>
        <li class="mb-2"><a class="has-background-white has-text-dark" href="#">Projects</a></li>
        <li class="mb-2"><a class="has-background-white has-text-dark" href="#">Contact us</a></li>
      </ul>
      <div class="mt-auto"><a class="button mb-3 is-fullwidth is-outlined is-rounded is-dark" href="#">Login</a><a class="button is-fullwidth is-rounded is-primary" href="#">Sign in</a></div>
    </aside>
  </div>
</section>

Navigation (horizontal) from Vendia

Bulma

Vendia

<section class="is-clipped has-background-white" x-data="{ dropdown: false, mobileNavOpen: false, nav: '' }">
  <nav class="navbar is-dark py-5 has-background-dark">
    <div class="navbar-brand">
      <a class="navbar-item mr-16" href="#">
        <img class="image" src="vendia-assets/logos/vendia.svg" alt="">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button navbar-menu-open navbar-burger is-ghost has-text-white p-0 mr-6">
        <svg viewbox="0 0 100 45" width="26" height="20" fill="currentColor"><rect width="100" height="6"></rect><rect y="18" width="100" height="6"></rect><rect y="38" width="100" height="6"></rect></svg>
      </button>
    </div>
    <div class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item has-text-white" href="#">Women</a><a class="navbar-item has-text-white" href="#">Men</a><a class="navbar-item has-text-white" href="#">Kids</a>
        <div class="navbar-item">
          <div class="is-clickable dropdown" x-on:mouseover="dropdown = true" x-on:mouseleave="dropdown = false">
            <div class="dropdown-trigger is-inline-flex has-text-white">
              <span>Browse</span>
              <span :class="{ 'is-rotate-180': dropdown, 'is-rotate-0': !dropdown }" class="ml-3">
                <svg width="12" height="7" viewbox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6666 1L5.99998 5.66667L1.33331 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
            </div>
            <div :class="{ 'is-block dropdown-menu': dropdown, 'is-hidden': !dropdown }" class="pt-6 has-background-dark" style="border-top: none;">
              <div class="dropdown-content has-background-dark" style="min-width: max-content;">
                <div class="px-3">
                  <a class="is-flex p-5" href="#">
                    <div class="mr-5">
                      <svg width="21" height="21" viewbox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.4717 6.33333V19.875M10.4717 6.33333C10.4717 6.33333 10.4717 4.77836 10.4717 4.25C10.4717 3.09941 11.4038 2.16667 12.5537 2.16667C13.7036 2.16667 14.6357 3.09941 14.6357 4.25C14.6357 5.40059 13.7036 6.33333 12.5537 6.33333C11.9319 6.33333 10.4717 6.33333 10.4717 6.33333ZM10.4717 6.33333C10.4717 6.33333 10.4717 4.31553 10.4717 3.72917C10.4717 2.29093 9.30649 1.125 7.86914 1.125C6.4318 1.125 5.2666 2.29093 5.2666 3.72917C5.2666 5.16741 6.4318 6.33333 7.86914 6.33333C8.72048 6.33333 10.4717 6.33333 10.4717 6.33333ZM3.18457 10.5H17.7588M3.18457 10.5C2.0347 10.5 1.10254 9.56726 1.10254 8.41667C1.10254 7.26607 2.0347 6.33333 3.18457 6.33333H17.7588C18.9087 6.33333 19.8408 7.26607 19.8408 8.41667C19.8408 9.56726 18.9087 10.5 17.7588 10.5M3.18457 10.5L3.18457 17.7917C3.18457 18.9423 4.11673 19.875 5.2666 19.875H15.6768C16.8266 19.875 17.7588 18.9423 17.7588 17.7917V10.5" stroke="#A1A4A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <div class="mr-24">
                      <span class="has-text-white is-block has-text-weight-bold">Category Text</span>
                      <span class="has-text-grey-lighter">Add your details here</span>
                    </div>
                  </a>
                  <a class="is-flex p-5 has-background-grey-dark" href="#">
                    <div class="mr-5">
                      <svg width="21" height="21" viewbox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.4717 6.33333V19.875M10.4717 6.33333C10.4717 6.33333 10.4717 4.77836 10.4717 4.25C10.4717 3.09941 11.4038 2.16667 12.5537 2.16667C13.7036 2.16667 14.6357 3.09941 14.6357 4.25C14.6357 5.40059 13.7036 6.33333 12.5537 6.33333C11.9319 6.33333 10.4717 6.33333 10.4717 6.33333ZM10.4717 6.33333C10.4717 6.33333 10.4717 4.31553 10.4717 3.72917C10.4717 2.29093 9.30649 1.125 7.86914 1.125C6.4318 1.125 5.2666 2.29093 5.2666 3.72917C5.2666 5.16741 6.4318 6.33333 7.86914 6.33333C8.72048 6.33333 10.4717 6.33333 10.4717 6.33333ZM3.18457 10.5H17.7588M3.18457 10.5C2.0347 10.5 1.10254 9.56726 1.10254 8.41667C1.10254 7.26607 2.0347 6.33333 3.18457 6.33333H17.7588C18.9087 6.33333 19.8408 7.26607 19.8408 8.41667C19.8408 9.56726 18.9087 10.5 17.7588 10.5M3.18457 10.5L3.18457 17.7917C3.18457 18.9423 4.11673 19.875 5.2666 19.875H15.6768C16.8266 19.875 17.7588 18.9423 17.7588 17.7917V10.5" stroke="#A1A4A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <div class="mr-24">
                      <span class="has-text-white is-block has-text-weight-bold">Category Text</span>
                      <span class="has-text-grey-lighter">Add your details here</span>
                    </div>
                    <div class="is-align-self-center">
                      <svg width="21" height="20" viewbox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.4471 4.16675L18.2768 10.0001M18.2768 10.0001L12.4471 15.8334M18.2768 10.0001L3.28613 10.0001" stroke="#F2FF5A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                  </a>
                  <a class="is-flex p-5" href="#">
                    <div class="mr-5">
                      <svg width="21" height="21" viewbox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.4717 6.33333V19.875M10.4717 6.33333C10.4717 6.33333 10.4717 4.77836 10.4717 4.25C10.4717 3.09941 11.4038 2.16667 12.5537 2.16667C13.7036 2.16667 14.6357 3.09941 14.6357 4.25C14.6357 5.40059 13.7036 6.33333 12.5537 6.33333C11.9319 6.33333 10.4717 6.33333 10.4717 6.33333ZM10.4717 6.33333C10.4717 6.33333 10.4717 4.31553 10.4717 3.72917C10.4717 2.29093 9.30649 1.125 7.86914 1.125C6.4318 1.125 5.2666 2.29093 5.2666 3.72917C5.2666 5.16741 6.4318 6.33333 7.86914 6.33333C8.72048 6.33333 10.4717 6.33333 10.4717 6.33333ZM3.18457 10.5H17.7588M3.18457 10.5C2.0347 10.5 1.10254 9.56726 1.10254 8.41667C1.10254 7.26607 2.0347 6.33333 3.18457 6.33333H17.7588C18.9087 6.33333 19.8408 7.26607 19.8408 8.41667C19.8408 9.56726 18.9087 10.5 17.7588 10.5M3.18457 10.5L3.18457 17.7917C3.18457 18.9423 4.11673 19.875 5.2666 19.875H15.6768C16.8266 19.875 17.7588 18.9423 17.7588 17.7917V10.5" stroke="#A1A4A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <div class="mr-24">
                      <span class="has-text-white is-block has-text-weight-bold">Category Text</span>
                      <span class="has-text-grey-lighter">Add your details here</span>
                    </div>
                  </a>
                </div>
                <div class="px-8 py-5" style="border-top: 1px solid rgba(17, 18, 21, 1);">
                  <span class="is-block mb-2 is-size-6 has-text-grey-lighter has-text-weight-medium">Documentation</span>
                  <div><a class="is-inline-block mb-2 has-text-primary-gradient" href="#">Get the most out of the platform</a></div>
                  <div><a class="is-inline-block has-text-primary-gradient" href="#">See more components</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="navbar-end">
        <div class="navbar-item">
          <a class="is-inline-flex is-align-items-center is-justify-content-center has-text-dark" href="#">
            <svg width="22" height="24" viewbox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 10.75V5.75C16 2.98858 13.7614 0.75 11 0.75C8.23858 0.75 6 2.98858 6 5.75V10.75M2.25 8.25H19.75L21 23.25H1L2.25 8.25Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <div class="-ml-2 p-1 has-background-dark is-rounded">
              <div class="px-2 has-background-gradient-primary is-rounded">
                <span class="is-size-6 has-text-weight-bold">3 in Cart</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{ 'is-block': mobileNavOpen, 'is-hidden': !mobileNavOpen }" class="is-hidden navbar-side is-fixed is-top-0 is-bottom-0 is-left-0 has-mw-sm" style="z-index: 9999; width: 100%;">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="is-fixed is-inset-0 has-background-dark" style="opacity: 75%; z-index: 50;"></div>
    <div class="menu is-relative is-flex is-flex-direction-column py-6 px-6 has-background-white" style="width: 100%; height: 100%; z-index: 50; overflow-y: auto;">
      <div class="is-flex mb-8 is-align-items-center">
        <a class="mb-0 mr-auto is-size-4" href="#">
          <img class="image is-fullwidth" src="vendia-assets/logos/vendia-dark.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button is-text p-0 mb-2" type="button" aria-label="Close">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="py-12 mb-auto">
        <ul>
          <li class="mb-6"><a class="has-text-dark" href="#">Women</a></li>
          <li class="mb-6"><a class="has-text-dark" href="#">Men</a></li>
          <li class="mb-6"><a class="has-text-dark" href="#">Kids</a></li>
          <li><a class="has-text-dark" href="#">Browse</a></li>
        </ul>
      </div>
      <div><a class="button is-grey is-outlined mb-2 is-fullwidth" href="#">Login</a><a class="button is-borderless has-background-gradient-primary is-fullwidth" href="#">Sign in</a></div>
    </div>
  </div>
</section>

A well-designed navigation component determines how easily users navigate your site. This will affect both the conversion of the page and its position in SEO.

Browse the Bulma navigation component variants available in our editor. Under each of them is clear code that you can easily edit. Components are sorted by UI libraries, which consist of many other elements in the same style. Each of these libraries was created by our talented designers to allow you to create diverse and pretty pages.

See all variations of Bulma navigation components and the code underneath them in Shuffle Editor.

Try the demo for free.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Bulma Navigation (Horizontal) Components

Framework

UI Library

Components

Navigation (horizontal) from Flaro

Your next website starts here

Navigation (horizontal) from Zeus

Navigation (horizontal) from Artemis Dashboard

Navigation (horizontal) from Yofte

Navigation (horizontal) from Pstls.

Navigation (horizontal) from Acros

Navigation (horizontal) from Bendis

Navigation (horizontal) from Metis

Navigation (horizontal) from Cronos

Navigation (horizontal) from Plain

Navigation (horizontal) from asitrastudio

Navigation (horizontal) from Vendia

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company