General
Template
Layout
Typography
Navigational
Informational
- Info Boxes
- Output Boxes
-
Code Boxes
- Cards
Data
Input
Images
Header
Footer
Components - Header
Header Component - Menubar
Website section with navigational menu
Menubar Component
Menubar - Primary
Menubar Section Sample
Menubar - View in a seperate window tabOutput Sample
Implementation Code and the output
<section class="menu-primary-container">
<div class="menu-primary-row">
<div class="menu-primary-row-main">
<div class="menu-primary-logo">
<a href=" ">
<i class="ph-fill ph-leaf"></i>
NeonUI
</a>
</div>
<span class="menu-highlight-pill">
<a href="">Home</a>
</span>
<span class="menu-highlight-pill">
<div>
Products
<span class="drop-arrow">
<i class="fa-solid fa-angle-down"></i>
</span>
</div>
<div class="menu-primary-dropdown">
<div class="menu-primary-dropdown-container">
<div class="menu-primary-dropdown-summary">
<div class="menu-primary-dropdown-title">
The List of Products available at NeonUI
</div>
<div class="menu-primary-dropdown-desc">Summary: Lorem ipsum, dolor sit amet
consectetur adipisicing elit.
Earum aliquam
</div>
<a class="button-grey-translucent" href="">
<span>See Overview</span>
<i class="ph-bold ph-download-simple"></i>
</a>
</div>
<div class="menu-primary-dropdown-list-container">
<div>
<a class="menu-primary-dropdown-list-items" href="">
<span class="item-icon">
<i class="fa-regular fa-sun"></i>
</span>
<span>Product1</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</a>
<a class="menu-primary-dropdown-list-items" href="">
<span class="item-icon">
<i class="ph-light ph-circle-half"></i>
</span>
<span>Features request</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</a>
<a class="menu-primary-dropdown-list-items" href="">
<span class="item-icon">
<i class="ph ph-align-right"></i>
</span>
<span>Service request</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</a>
<a class="menu-primary-dropdown-list-items" href="">
<span class="item-icon">
<i class="ph ph-mouse-right-click "></i>
</span>
<span>Container product1</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</a>
<a class="menu-primary-dropdown-list-items" href="">
<span class="item-icon">
<i class="ph-light ph-circle-half"></i>
</span>
<span>Review Product</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</a>
</div>
<div>
<a class="menu-primary-dropdown-list-items" href="">
<span class="item-icon">
<i class="fa-regular fa-sun"></i>
</span>
<span>Product1</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</a>
<a class="menu-primary-dropdown-list-items" href="">
<span class="item-icon">
<i class="ph-light ph-circle-half"></i>
</span>
<span>Features request</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</a>
<a class="menu-primary-dropdown-list-items" href="">
<span class="item-icon">
<i class="ph ph-align-right"></i>
</span>
<span>Service request</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</a>
<a class="menu-primary-dropdown-list-items" href="">
<span class="item-icon">
<i class="ph ph-mouse-right-click "></i>
</span>
<span>Container product1</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</a>
<a class="menu-primary-dropdown-list-items" href="">
<span class="item-icon">
<i class="ph-light ph-circle-half"></i>
</span>
<span>Review Product</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</a>
</div>
</div>
<div class="menu-primary-dropdown-right-info">
<section class="image-frame">
<img class="image-frame-img" src="image1.jpg"
alt="green mushroom image">
<div class="image-title">
A cluster of mushrooms
</div>
</section>
</div>
</div>
</div>
</span>
<span class="menu-highlight-pill">
<div>
Services
<span class="drop-arrow">
<i class="fa-solid fa-angle-down"></i>
</span>
<div class="menu-primary-dropdown">
<div class="menu-primary-dropdown-container">
<div class="menu-primary-dropdown-summary">
<div class="menu-primary-dropdown-title">
The List of services available at NeonUI
</div>
<div class="menu-primary-dropdown-desc">Summary: Lorem ipsum, dolor sit amet
consectetur adipisicing elit.
Earum aliquam
</div>
<a class="button-grey-translucent" href="">
<span>See Overview</span>
<i class="ph-bold ph-download-simple"></i>
</a>
</div>
<div class="menu-primary-dropdown-list-container">
<div>
<a class="menu-primary-dropdown-list-items" href="">
<span class="item-icon">
<i class="fa-regular fa-sun"></i>
</span>
<span>Product1</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</a>
<a class="menu-primary-dropdown-list-items" href="">
<span class="item-icon">
<i class="ph-light ph-circle-half"></i>
</span>
<span>Features request</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</a>
<a class="menu-primary-dropdown-list-items" href="">
<span class="item-icon">
<i class="ph ph-align-right"></i>
</span>
<span>Service request</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</a>
<a class="menu-primary-dropdown-list-items" href="">
<span class="item-icon">
<i class="ph ph-mouse-right-click "></i>
</span>
<span>Container product1</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</a>
<a class="menu-primary-dropdown-list-items" href="">
<span class="item-icon">
<i class="ph-light ph-circle-half"></i>
</span>
<span>Review Product</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</a>
</div>
<div class="button-grey-translucent">
See Overview
</div>
</div>
<div class="menu-primary-dropdown-right-info">
<section class="image-frame">
<img class="image-frame-img" src="image2.jpg"
alt="green mushroom image">
<div class="image-title">
A cluster of mushrooms
</div>
</section>
</div>
</div>
</div>
</div>
</span>
<span class="menu-highlight-pill">
<a href="">About</a>
</span>
<div class="menu-dropdown-overlay">
</div>
</div>
<div class="menu-primary-row-right">
<div class="menu-primary-right-items">
<a class="button-black" href="">
<span>Download</span>
<i class="ph-bold ph-download-simple"></i>
</a>
<a class="button-grey-translucent" href="">
<span>Login</span>
</a>
</div>
<span class="menu-mobile">
<span class="menu-mobile-container">
<span class="menu-lines"></span>
<span class="menu-lines"></span>
<span class="menu-lines"></span>
</span>
</span>
</div>
</div>
</section>
<aside class="menu-mobile-overlay">
</aside>
<section class="menu-mobile-slidemenu">
<aside class="modal-close-button">
<svg class=" " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10.4951 11.5557L5.02539 17.0254L6.08605 18.086L11.5557 12.6164L17.0254 18.0861L18.086 17.0254L12.6164
11.5557L18.086 6.08605L17.0254 5.02539L11.5557 10.4951L6.08605 5.0254L5.02539 6.08606L10.4951 11.5557Z"
fill="#fff"></path>
</svg>
</aside>
<section class="slidemenu-main-section">
<span class="slidemenu-main-text">
<span>Products</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</span>
<span class="slidemenu-main-text">
<span>Feature Request</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</span>
<span class="slidemenu-main-text">
<span>Service request</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</span>
<span class="slidemenu-main-text">
<span>Continer Product</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</span>
<span class="slidemenu-main-text">
<span>Review Product</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</span>
<span class="slidemenu-main-text">
<span>Test menu</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</span>
<span class="slidemenu-main-text">
<span>Service request</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</span>
<span class="slidemenu-main-text">
<span>Continer Product</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</span>
<span class="slidemenu-main-text">
<span>Review Product</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</span>
<span class="slidemenu-main-text">
<span>Test menu</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</span>
</section>
<section class="slidemenu-sub-section">
<span class="slidemenu-sub-text">
<span>NeonUI Services</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</span>
<span class="slidemenu-sub-text">
<span>World of NeonUI</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</span>
<span class="slidemenu-sub-text">
<span>Store Locator</span>
<i class="fa-solid fa-chevron-right right-arrow"></i>
</span>
</section>
<section class="slidemenu-last-section">
<span class="slidemenu-last-text"><a href="">Sign In</a></span>
<span class="slidemenu-last-text"><a href="">My Orders</a></span>
<span class="slidemenu-last-text"><a href="">Contact Us</a></span>
<span class="slidemenu-last-text"><a href="">+1-555-555-5555</a></span>
</section>
</section>
Copy