Adding Navigation Menus

To implement a navigation menu, you can utilize the Nav component. Below is an example of how to set it up:

import React, { useState } from "react";

import { Nav, Icon } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {

const [activeKey, setActiveKey] = useState();

const handleSelect = (activeKey) => {

setActiveKey(activeKey);

};

return (

<Nav activeKey={activeKey} onSelect={handleSelect}>

<Nav.Item eventKey="1">Home</Nav.Item>

<Nav.Item eventKey="2">News</Nav.Item>

<Nav.Item eventKey="3">Solutions</Nav.Item>

</Nav>

);

}

In this code, we pass the activeKey to the activeKey prop, allowing the handleSelect function to update the active menu item based on user interaction.

Customizing Menu Items

Each Nav.Item will be highlighted when its eventKey matches the activeKey. You can enhance your navigation by adding icons using the icon prop or making the menu vertical by using the vertical prop.

For instance:

<Nav.Item eventKey="1" icon={<Icon icon="home" />}>Home</Nav.Item>

You can also mark a menu item as active or disabled with the active and disabled props respectively. Here’s how you can set an item to active:

<Nav.Item eventKey="1" active>Home</Nav.Item>

To disable an item, you can use:

<Nav.Item eventKey="2" disabled>News</Nav.Item>

Ensuring Equal Sizes for Menu Items

To make all navigation items the same size, simply include the justified prop:

<Nav justified>

<Nav.Item eventKey="1">Home</Nav.Item>

<Nav.Item eventKey="2">News</Nav.Item>

<Nav.Item eventKey="3">Solutions</Nav.Item>

</Nav>

Incorporating Dropdowns

You can also add dropdown menus within your navigation using the Dropdown component. Here’s an example of how to implement it:

<Dropdown title="Fruits">

<Dropdown.Item eventKey="1">Apple</Dropdown.Item>

<Dropdown.Item eventKey="2">Orange</Dropdown.Item>

<Dropdown.Menu>

<Dropdown.Item eventKey="3">Red</Dropdown.Item>

<Dropdown.Item eventKey="4">Green</Dropdown.Item>

</Dropdown.Menu>

</Dropdown>