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.
- Each menu item must have a
name
and ahref
property. They can also optionally have atarget
property, which allows you to open links in a new tab, and anactive
property to highlight the currently active link. - The
logo
prop must reference an object with aurl
property pointing to an image. This object also accepts analt
,width
, andheight
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:
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:
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:
Menus with Additional Elements
Menus can also accept child elements. This enables you to add custom elements into your menu, such as a CTA:
API
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 . |
Request improvement for this page