Menu Component for Astro, Svelte, and React

Responsive navigational menu at the top of your page

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

---
import { Menu } from 'webcoreui/astro'

const menu = [
    { name: 'Home', url: '/', active: true },
    { name: 'Docs', url: '/docs/menu', target: '_blank' }
]

const menuLogo = {
    url: '/logo.png',
    width: 100
}
---

<Menu items={menu} logo={menuLogo} />

<script>
    import { Menu } from 'webcoreui/svelte'

    const menu = [
        { name: 'Home', url: '/', active: true },
        { name: 'Docs', url: '/docs/menu', target: '_blank' }
    ]

    const menuLogo = {
        url: '/logo.png',
        width: 100
    }
</script>

<Menu items={menu} logo={menuLogo} />

import React from 'react'
import { Menu } from 'webcoreui/react'

const menu = [
    { name: 'Home', url: '/', active: true },
    { name: 'Docs', url: '/docs/menu', target: '_blank' }
]

const menuLogo = {
    url: '/logo.png',
    width: 100
}

const Component = () => (
    <Menu items={menu} logo={menuLogo} />
)

export default Component

Each menu item must have a name and a url property. They can also optionally have a target property, which allows you to open links in a new tab, and an active property to highlight the currently active link.
The logo prop must reference an object with a url property pointing to an image. This object also accepts an alt, width, and height properties.

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 with Additional Elements

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="github" 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="github" 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="github" size={20} />
        </Button>
    </Menu>
)

export default Component

API

type MenuProps = {
    items?: {
        url: string
        name: string
        target?: string
        active?: boolean
    }[]
    logo?: {
        url?: string
        alt?: string
        width?: number
        height?: number
        html?: string
    }
    centerLogo?: boolean
    className?: string
    wrapperClassName?: string
}

Prop	Purpose
`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`.

<- List Modal ->

Request improvement for this page