Menu Component
warning
Components is not ready yet.
The glu-menu component is a flexible navigation component that supports multiple layouts and responsive behavior. It provides three main layout types and adapts to mobile views automatically when is-responsive is enabled.
Basic Usage
Example 1: Logo-Left Layout
- HTML
Result
Loading...
Live Editor
<glu-menu type="logo-left" is-sticky> <img src="https://placehold.jp/120x40.png" slot="logo" alt="Logo" width="120" /> <div slot="menu-items"> <glu-menu-item href="#" type="label">Home</glu-menu-item> <glu-menu-item href="#" type="label">About</glu-menu-item> <glu-menu-item href="#" type="label">Contact</glu-menu-item> </div> <div slot="right-actions"> <glu-menu-item href="#" type="button">Login</glu-menu-item> </div> </glu-menu>
Layout Types
Logo-Center Layout
- HTML
Result
Loading...
Live Editor
<glu-menu type="logo-center"> <img src="https://placehold.jp/150x50.png" slot="logo" alt="Logo" width="150" /> <div slot="menu-items"> <glu-menu-item type="label">Products</glu-menu-item> <glu-menu-item type="label">Solutions</glu-menu-item> </div> <div slot="right-actions"> <glu-menu-item type="button">Contact</glu-menu-item> </div> </glu-menu>
Menu-Center Layout
- HTML
Result
Loading...
Live Editor
<glu-menu type="menu-center" is-sticky> <img src="https://placehold.jp/100x40.png" slot="logo" alt="Logo" width="100" /> <div slot="menu-items"> <glu-menu-item type="label">Home</glu-menu-item> <glu-menu-item type="label">Resources</glu-menu-item> </div> <div slot="right-actions"> <glu-menu-item type="button">Search</glu-menu-item> </div> </glu-menu>
Responsive Behavior
- HTML
Result
Loading...
Live Editor
<glu-menu type="logo-left" is-responsive> <img src="https://placehold.jp/120x40.png" slot="logo" alt="Logo" width="120" /> <div slot="menu-items"> <glu-menu-item type="label">Home</glu-menu-item> <glu-menu-item type="label">About</glu-menu-item> <glu-menu-item type="label">Contact</glu-menu-item> </div> <div slot="right-actions"> <glu-menu-item type="button">Login</glu-menu-item> </div> </glu-menu>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | `'logo-left' | 'logo-center' | 'menu-center'` |
logo | string | - | URL for the logo image (overrides logo slot) |
is-sticky | boolean | false | Makes the menu stick to the top of the viewport |
is-responsive | boolean | false | Enables mobile-responsive behavior |
Slots
| Name | Description |
|---|---|
logo | Content for the logo section (overridden by logo prop if set) |
menu-items | Main navigation items for the menu |
right-actions | Additional actions or buttons displayed on the right side |
Examples
Using Logo Prop
- HTML
Result
Loading...
Live Editor
<glu-menu type="logo-left" logo="https://placehold.jp/120x40.png" is-responsive> <div slot="menu-items"> <glu-menu-item type="label">Home</glu-menu-item> <glu-menu-item type="label">About</glu-menu-item> </div> <div slot="right-actions"> <glu-menu-item type="button">Sign In</glu-menu-item> </div> </glu-menu>
Complex Navigation
- HTML
Result
Loading...
Live Editor
<glu-menu type="logo-center" is-sticky is-responsive> <img src="https://placehold.jp/150x50.png" slot="logo" alt="Logo" width="150" /> <div slot="menu-items"> <glu-menu-item type="dropdown"> Products <div slot="dropdown-content"> <glu-menu-item type="label">Hardware</glu-menu-item> <glu-menu-item type="label">Software</glu-menu-item> </div> </glu-menu-item> <glu-menu-item type="label">Solutions</glu-menu-item> </div> <div slot="right-actions"> <glu-menu-item type="button">Contact Sales</glu-menu-item> <glu-menu-item type="button">Support</glu-menu-item> </div> </glu-menu>
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
isResponsive | is-responsive | If true, the menu adapts for smaller screens by enabling mobile-friendly behavior. | boolean | false |
isSticky | is-sticky | If true, the menu will be fixed at the top of the viewport. | boolean | false |
logo | logo | URL for the logo image. If set, it takes precedence over the logo slot. | string | undefined |
type | type | Defines the menu layout type. - logo-left: Logo on the left, menu items in the center, right actions on the right. - logo-center: Menu items on the left, logo in the center, right actions on the right. - menu-center: Logo on the left, menu items in the center, right actions on the right. | "logo-center" | "logo-left" | "menu-center" | 'logo-left' |
Slots
| Slot | Description |
|---|---|
"logo" | Slot for custom logo content (used when logo prop is not set). |
"menu-items" | Slot for the menu items to be displayed. |
"right-actions" | Slot for additional actions or buttons aligned to the right. |
CSS Custom Properties
| Name | Description |
|---|---|
--glu-menu-background | Background color of the menu. |
--glu-menu-border-color | Border color for the menu. |
--glu-menu-logo-max-height | Maximum height for the logo. |
--glu-menu-logo-max-width | Maximum width for the logo. |
--glu-menu-min-height | Minimum height of the menu (desktop). |
--glu-menu-mobile-breakpoint | Breakpoint for mobile view. |
--glu-menu-mobile-height | Height of the menu on mobile devices. |
--glu-menu-mobile-menu-bg | Background color for the mobile menu. |
--glu-menu-padding | Padding inside the menu. |
--glu-menu-shadow | Shadow effect for the menu. |
--glu-menu-toggle-color | Color for the mobile menu toggle icon. |
--glu-menu-transition | Transition timing for animations. |
--glu-menu-z-index | Z-index for the menu to ensure it stays on top. |
Built with StencilJS