I want to Highlight the selected tab in Navbar on React BootStrap

I want to simply highlight the tab selected from the NavBar . I had used the Navbar Component of React-bootstrap and used the state to change the bgColor and textColor of the selected tab. But it is still NOT working? Any corrections?

import React,{useState} from 'react';
import { Navbar,Container, Nav } from "react-bootstrap"
import { LogOut } from "./LogOut"

const NavbarComponent = () => {

const [bgcolor, setBgcolor] = useState('black');
const [textcolor, setTextcolor] = useState('white');    

function handleHighlightTab() {

return (
    <Navbar bg="dark" variant="dark" fixed='top' className='nav-pills'>
            <Navbar.Brand href="/">Verticals</Navbar.Brand>
            <Nav className="me-auto">
                <Nav.Link href="/grocery" onSelect={handleHighlightTab} style={{backgroundColor:{bgcolor},color:{textcolor} }} >Grocery</Nav.Link>
                <Nav.Link href="/fashion" onSelect={handleHighlightTab} style={{backgroundColor:{bgcolor},color:{textcolor} }} >Fashion</Nav.Link>
                <Nav.Link href="/footwear" onSelect={handleHighlightTab} style={{backgroundColor:{bgcolor},color:{textcolor} }}>Footwear</Nav.Link>
            <LogOut />


export default NavbarComponent;

What I want is to highlight the clicked tab only? It should remain highlighted all the time when we are on that page (like tab component or nav-pills)

Hi @MohitMaroliya ,

In your <Nav.Link> style your tag as

style={{backgroundColor:${bgcolor},color:${textcolor} }}

Keep your bgcolor and textcolor in a template string(using backtick and dollar symbol)

The style object is just an object. You use it like any other JS object.

Anyway, as far as I can tell, you do not need any code for this. You can just overwrite the default BS active state CSS.

.nav-link.active {
  color: #fff !important;
  background: black !important;

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.