Search documentation v0.6.1

Menu

Responsive navigational menu at the top of your page

Source ↗️ Report Issue ↗️

Use the Menu component to display a list of navigational options or actions for users. Improve the usability of your site by including links to relevant and important pages on your website.

Preview
How to use Menus in Astro
---
import { Menu } from 'webcoreui/astro'
const menu = [
{ name: 'Home', href: '/', active: true },
{ name: 'Docs', href: '/docs/menu', target: '_blank' }
]
const menuLogo = {
url: '/logo.png',
width: 100
}
---
<Menu items={menu} logo={menuLogo} />
How to use Menus in Svelte
<script>
import { Menu } from 'webcoreui/svelte'
const menu = [
{ name: 'Home', href: '/', active: true },
{ name: 'Docs', href: '/docs/menu', target: '_blank' }
]
const menuLogo = {
url: '/logo.png',
width: 100
}
</script>
<Menu items={menu} logo={menuLogo} />
How to use Menus in React
import React from 'react'
import { Menu } from 'webcoreui/react'
const menu = [
{ name: 'Home', href: '/', active: true },
{ name: 'Docs', href: '/docs/menu', target: '_blank' }
]
const menuLogo = {
url: '/logo.png',
width: 100
}
const Component = () => (
<Menu items={menu} logo={menuLogo} />
)
export default Component

Different Layouts

Using the className and centerLogo props in combination with additional CSS styles, you can easily customize the layout of your menu. Here are some commonly used layout variations:

<Menu
items={menu}
logo={menuLogo}
wrapperClassName="left-aligned"
/>
<style>
.left-aligned {
justify-content: flex-start;
}
</style>
<Menu
items={menu}
logo={menuLogo}
centerLogo={true}
/>
<Menu
items={menu}
logo={menuLogo}
wrapperClassName="center-aligned"
/>
<style>
.center-aligned {
justify-content: center;
}
</style>
<Menu
items={menu}
logo={menuLogo}
wrapperClassName="center-aligned"
centerLogo={true}
/>
<style>
.center-aligned {
justify-content: center;
}
</style>

Using the same approach, you can also customize other aspects of your menu, such as making it non-sticky.

Logo Variations

Menus can also be created with logos only or no logos at all. Simply omit the items or logo prop to achieve the desired layout:

<!-- Logo only: -->
<Menu logo={menuLogo} />
<!-- Menu only: -->
<Menu items={menu} />

If you’d like to directly inject SVG elements as logos for later styling them through CSS, you can pass the SVG string to the html property of the logo object:

<Menu logo={{ html: '<svg ... />' }} />

Menus can also accept child elements. This enables you to add custom elements into your menu, such as a CTA:

---
import { Menu, Button, Icon } from 'webcoreui/astro'
const menu = [...]
const menuLogo = {...}
---
<Menu items={menu} logo={menuLogo}>
<Button theme="flat" href="#">
<Icon type="search" size={20} />
</Button>
</Menu>
<script>
import { Menu, Button, Icon } from 'webcoreui/svelte'
const menu = [...]
const menuLogo = {...}
</script>
<Menu items={menu} logo={menuLogo}>
<Button theme="flat" href="#">
<Icon type="search" size={20} />
</Button>
</Menu>
import React from 'react'
import { Menu, Button, Icon } from 'webcoreui/react'
const menu = [...]
const menuLogo = {...}
const Component = () => (
<Menu items={menu} logo={menuLogo}>
<Button theme="flat" href="#">
<Icon type="search" size={20} />
</Button>
</Menu>
)
export default Component

API

type MenuProps = {
items?: {
href: string
name: string
target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop'
active?: boolean
}[]
logo?: {
url?: string
alt?: string
width?: number
height?: number
html?: string
}
centerLogo?: boolean
className?: string
wrapperClassName?: string
}
PropPurpose
items Specifies the menu items.
items.target Specifies where the link should open
items.active Sets the link as active
logo Specifies a logo for the menu.
logo.html Use for directly injecting SVG logos into the markup.
centerLogo Displays the logo in the center of the menu. Defaults to false.
className Pass additional CSS classes for the header.
wrapperClassName Pass additional CSS classes for the wrapper inside the header.

Request improvement for this page