# Menu button

A menu button combines button and link behaviors for navigation menus.


## Overview

### Usage

Use the menu button to create clear and accessible navigation. Choose the appropriate combination of text and icon depending on the context:

*   **Text only** is best for straightforward links where the label clearly communicates the destination.
    
*   **Text with icon** adds clarity, especially when the icon reinforces the meaning (e.g., a user icon for profile-related links).
    
*   **Icon only** can be used when space is limited, but only if the icon is widely recognized and its meaning is clear.
    

Menu buttons have a selected state that visually indicate the current page or section.

### Sizes

The menu button comes in three sizes to fit different layout needs and navigation contexts:


*   **Large** - Typically used in primary navigation where space allows for larger, more prominent buttons. It provides good readability and clear touch targets.
    
*   **Medium** - Works well when space is limited but readability and clarity are still important.
    
*   **Small** - Optimized for tighter layouts and smaller viewports. The text and icon are vertically aligned to maintain visual balance in compact spaces, such as in mobile navigation or secondary toolbars.
    

Regardless of size, the height of the menu button will adapt to match the height set by the container. This ensures consistent alignment and spacing across the entire navigation.

### Do's and don'ts


## UX Guidelines

### Writing UX text for menu buttons