Examples

The MenuList component represents the container for the menu items. It is where you define and render individual MenuItem components. In this example, we have four menu items: "Get Coffee," "Take a Walk," "Pet a Dog," and "Meditate."

In this example, instead of directly placing child components within the Menu component, we provide a render prop function as the children. This function receives an object with the isOpen property, which indicates whether the menu is currently open or closed.

Using this isOpen property, we can dynamically update the appearance of the MenuButton component by setting the isActive prop based on the isOpen value. This allows us to style the button differently depending on the menu state.

The render prop function also enables us to customize the content of the MenuButton. In this case, we display "Close" or "Open" text based on the current state. This text is rendered dynamically by utilizing a ternary operator to conditionally display the appropriate label.

Within the render prop function, we continue defining the MenuListcomponent and its child MenuItem components. These represent the dropdown menu items that will be displayed when the menu is open. In this example, we have two menu items: "Do Something" and "Do Something Better," with the latter having a click event handler that triggers an alert when clicked.

By leveraging the render prop function in the Menu component, you can gain more control over the internal state and behavior of the menu, allowing for dynamic rendering and seamless interaction within your application.

By utilizing the custom button component with the Menu component, we can create a customized menu trigger with the desired visual appearance and behavior. The menu will now open and close as expected without any type errors.

To use the letter navigation functionality, follow these steps. You will notice that the focus automatically moves to the first MenuItem that begins with the letter you typed.

This image menu example is a unique menu component that showcases different images of the renowned actor, Keanu Reeves. Each menu item features a custom image of Keanu Reeves along with a corresponding label.

Inside the MenuList, we have three MenuItem components, each showcasing a different image of Keanu Reeves. The images are fetched from the "placekeanu.com" website with varying URLs to display unique images. Alongside each image, there is a label denoting the specific Keanu Reeves version.

In this customized example, we utilize the Chakra UI Menu component to create a menu with enhanced functionality. The MenuButton, rendered as an IconButton, features the HamburgerIcon and serves as the trigger for the menu. Within the MenuList, we define several MenuItem components. Each MenuItem includes an icon representing the action associated with it, such as AddIcon, ExternalLinkIcon, RepeatIcon, and EditIcon.

Additionally, a command or hotkey is specified for each menu item using the command prop, which provides a convenient way to communicate keyboard shortcuts or commands to the user. By incorporating icons and commands, this menu provides clear visual cues and helps users quickly identify and access specific actions. This approach can be adapted for a variety of use cases, such as productivity tools, text editors, or any application where efficient menu navigation and command execution are essential.

Within the MenuList, we utilize the MenuGroup component to create two distinct groups: Likes and Dislikes. Each group is defined by a title passed as a prop to MenuGroup. Under the Likes group, we have menu items like "Coffee" and "Dark Chocolate." After a MenuDivider, the Dislikes group includes menu items such as "Chicken Liver" and "Mean People."

By employing the MenuGroup component, you can structure your menus in a logical manner, making it easier for users to locate and select the desired options. This approach is particularly useful when organizing complex menus with multiple categories or sections. The MenuGroup component ensures a cohesive and intuitive user experience when navigating through various menu items.

By incorporating this approach, users can click on the menu items and navigate to the specified URLs or anchor targets. This is particularly useful when building navigation menus or dropdowns that require clickable links as menu options.