Update active item in menu with React and Semantic-Ui

Question

How can i change an item in the menu to be set to active item? Currently the first item "Home" is always set to be active item. The goal is that if I click on of the other items, then that item will be set to active and the other item will no longer be active.

return (
            <div className="ui menu">
                <Link to="/">
                    <img 
                    style={{
                        padding: 20
                    }}
                    className="ui image" 
                    src={Rmarketingv1}
                    alt="alt"
                    />
                </Link>
                <div 
                    style={{
                        margin: 40
                    }}
                    className="ui borderless horizontal right secondary menu"
                    >
                    <div className="active item">
                        <Link to="/">
                            <h2>
                                Home
                            </h2>
                        </Link>
                    </div>
                    <div className="item">
                        <Link to="/Service">
                            <h2>
                                Tjenester
                            </h2>
                        </Link>
                    </div>
                    <div className="item">
                        <Link to="/work">
                            <h2>
                                Jobbmuligheter
                            </h2>
                        </Link>
                    </div>
                    <div className="item">
                        <Link to="/contact">
                            <h2>
                                Kontakt
                            </h2>
                        </Link>
                    </div>
                </div>
            </div>
        );

Kavian Rabbani · Accepted Answer · 2020-07-27 06:07:30Z

1

You can just make use of NavLink instead of Link. you can give it an activeClassName prop and whenever the route matches to prop that className will be added to that link.

read the documentation here:
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md

answered Jul 27, 2020 at 6:07

Kavian Rabbani

9845 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kristian Rykkje Over a year ago

How exact would I go about implementing this?

Kavian Rabbani Over a year ago

just import NavLink and use it instead of Link, and add an activeClassName="some-semantic-ui-class". or if you want to add your own styles, add a custom class and go to your style files and write some css to style that className.

Tim Gerhard · Accepted Answer · 2020-07-29 12:34:55Z

1

React router feeatures a <NavLink> property which features an activeClassName property. So to make things work, change your <Links> like this:

<div className="item">
    <NavLink to="/" activeClassName="active">
        <h2>
            Home
        </h2>
    </NavLink>
</div>

Disclaimer: This will set the "active" class to your element and not your div like in your example above. Make sure to adjust the css code as well!

edited Jul 29, 2020 at 12:34

answered Jul 27, 2020 at 6:06

Tim Gerhard

3,6272 gold badges24 silver badges41 bronze badges

Collectives™ on Stack Overflow

Update active item in menu with React and Semantic-Ui

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related