Menu expanded and active elements

[tocho29]

Hello!!! I have 2 questions and I would like to ask for help :)

The first question is how can i make the default menu appear open? i'm trying to use the "expanded" parameter but it doesn't work.

The second question is when I click on an element how can I say that it is active and the other elements are not active?

I am looking at the documentation of this link: https://www.npmjs.com/package/@trendmicro/react-sidenav

But I can't get it to work, I hope you can help me.

Here is my code for your help.

Thank you very much.

`<SideNav onSelect={(selected) => { console.log(selected) }}

            <NavItem eventKey="home">
                <NavIcon>{iconHome}</NavIcon>
                <NavText>Home</NavText>
            </NavItem>

            <NavItem eventKey="charts">
                <NavIcon>{iconChartLine}</NavIcon>
                <NavText>Charts</NavText>

                <NavItem eventKey="charts/linechart">
                    <NavText>Line Chart</NavText>
                </NavItem>

                <NavItem eventKey="charts/barchart">
                    <NavText>Bar Chart</NavText>
                </NavItem>
            </NavItem>
        </SideNav.Nav>
    </SideNav> `

[Mirokv]

Had the same issue and came to this post trying to solve it. What i did to have the sidenav expanded by default was setting defaultExpanded to true inside the first Sidenav: <SideNav defaultExpanded={true}; onSelect={(selected) => {console.log(selected)}}>) As for detecting which element is active, the eventKey should be enough for the onSelect to catch the active element, in fact the console.log(selected) on the example code is logging it, if what you need is to make the url change when pressing on different elements you could use the hook from the react-router library. There's a very useful video on yt that teach you the basics of a React Sidebar Navigation Menu in 10 minutes.