Dropdown Navigation

Display navigation options with dropdown menus

Use the DropdownNavigation component to display a navigation menu with optional dropdown menus. They’re space efficient and can be used to organize menus with subcategories.

---
const dropdownNavigationMenuItems = [
    { name: 'Home', url: '/' },
    {
        name: 'Posts',
        children: [
            { name: 'Getting Started', url: '#' },
            { name: 'Installation', url: '#' },
            { name: 'Configuration', url: '#' }
        ]
    },
    { ... }
]
---

<DropdownNavigation
    logo={{ html: '<svg ... />' }}
    items={dropdownNavigationMenuItems}
/>

To use the DropdownNavigation component, you need to pass an array of navigation objects to the items prop. Each object can have the following properties:

• name: Sets the name of the navigation item.
• url: Sets a url for the navigation item.
• children: If the children prop is set, it’ll render the navigation item as a dropdown menu. Each dropdown menu item can be described by a name and url property.

Logo

Alongside the menu items, you can also display a logo by setting the logo prop. In the above example, the logo is set to an SVG string. However, you can also specify an external image by setting the following properties for the logo object:

• src: Sets the path to the logo.
• alt: Sets an alternate text for the logo.
• width and height: Sets the width and height of the logo.

CSS

By default, the DropdownNavigation component is set to sticky positioning, meaning it’ll follow the viewport on scroll. You can disable this in your dropdown-navigation.module.scss file by setting the $sticky variable at the top of the file to false:

$sticky: false;

There’s also an $expandedMaxHeight variable in the module CSS that you can use to customize the speed of the dropdown animation on mobile. Set this to a height greater than the height of your menu items combined.

API

type DropdownNavigationProps = {
    items: {
        name: string
        url?: string
        children?: {
            name: string
            url: string
        }[]
    }[]
    logo?: {
        url?: string
        alt?: string
        width?: number
        height?: number
        html?: string
    }
    className?: string
}