Using the Nav Component

The Nav component enables the creation of navigation elements. Here's a simple example of how to set it up:

import React from "react";

import { Nav, NavItem, NavLink } from "shards-react";

import "bootstrap/dist/css/bootstrap.min.css";

import "shards-ui/dist/css/shards.min.css";

export default function App() {

return (

<Nav>

<NavItem>

<NavLink active>Active</NavLink>

</NavItem>

<NavItem>

<NavLink>Link</NavLink>

</NavItem>

<NavItem>

<NavLink>Link</NavLink>

</NavItem>

<NavItem>

<NavLink disabled>Disabled Link</NavLink>

</NavItem>

</Nav>

);

}

To configure your links as tabs, add the tabs prop:

<Nav tabs>

...

</Nav>

For a pill-style navigation, utilize the pills prop:

<Nav pills>

...

</Nav>

If you want the navbar to span the entire width of the screen, incorporate the fill prop:

<Nav fill>

...

</Nav>

To create evenly spaced navigation items, use the justified prop:

<Nav justified>

...

</Nav>

Implementing the Navbar Component

To integrate a navbar into your application, you can use the Navbar component. Here's an example:

import React, { useState } from "react";

import { faSearch } from "@fortawesome/free-solid-svg-icons";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import {

Navbar,

NavbarToggler,

NavbarBrand,

Nav,

NavItem,

NavLink,

Dropdown,

DropdownToggle,

DropdownMenu,

DropdownItem,

InputGroup,

InputGroupAddon,

InputGroupText,

FormInput,

Collapse

} from "shards-react";

import "bootstrap/dist/css/bootstrap.min.css";

import "shards-ui/dist/css/shards.min.css";

export default function App() {

const [dropdownOpen, setDropdownOpen] = useState(false);

const [collapseOpen, setCollapseOpen] = useState(false);

const toggleNavbar = () => {

setCollapseOpen(prev => !prev);

};

const toggleDropdown = () => {

setDropdownOpen(prev => !prev);

};

return (

<Navbar>

<NavbarBrand>Shards React</NavbarBrand>

<NavbarToggler onClick={toggleNavbar} />

<Collapse open={collapseOpen} navbar>

<Nav navbar>

<NavItem>

<NavLink active>Active</NavLink>

</NavItem>

<NavItem>

<NavLink disabled>Disabled</NavLink>

</NavItem>

<NavItem>

<Dropdown open={dropdownOpen} toggle={toggleDropdown}>

<DropdownToggle caret>Dropdown</DropdownToggle>

<DropdownMenu>

<DropdownItem>Action</DropdownItem>

<DropdownItem>Another action</DropdownItem>

<DropdownItem>Something else here</DropdownItem>

</DropdownMenu>

</Dropdown>

</NavItem>

</Nav>

<InputGroup>

<InputGroupAddon type="prepend">

<InputGroupText><FontAwesomeIcon icon={faSearch} /></InputGroupText>

</InputGroupAddon>

<FormInput placeholder="Search" />

</InputGroup>

</Collapse>

</Navbar>

);

}

In this setup, the Collapse component is included in the Navbar to make it responsive at the small breakpoint. The navbar prop must be added to both the Collapse and Nav components to ensure they fit correctly within the navbar layout. The Collapse will expand at medium breakpoints or larger, while the InputGroup remains visible across all screen sizes.