Navbar dropdown doesn't work

[ghost]

With the example in the docs (https://couds.github.io/react-bulma-components/?path=/docs/components-navbar--default) the navbar dropdown item doesn't work. Also in mobile view the hamburger menu doesn't open when clicked.

[ghost]

I found the solution to the burger menu here https://github.com/couds/react-bulma-components/issues/327 but there's still the dropdown issue.

[couds]

Hi @erikKeresztes can you post the exact code you are using? Thanks.

Also what do you mean it does not work. Please describe the current behavior vs the expected behavior

[ghost]

@couds I mean that when clicking the dropdown, instead of the menu showing, nothing happens. This is the JSX, taken from the docs (I just changed the last align from "end" to "right" because "end" isn't valid):

            <Navbar>
                <Navbar.Brand>
                    <Navbar.Item href="#">
                        <img
                            alt="Bulma: a modern CSS framework based on Flexbox"
                            height="28"
                            src="https://bulma.io/images/bulma-logo.png"
                            width="112"
                        />
                    </Navbar.Item>
                    <Navbar.Burger />
                </Navbar.Brand>
                <Navbar.Menu>
                    <Navbar.Container>
                        <Navbar.Item href="#">
                            <Navbar.Link>First</Navbar.Link>
                            <Navbar.Dropdown>
                                <Navbar.Item href="#">Subitem 1</Navbar.Item>
                                <Navbar.Item href="#">Subitem 2</Navbar.Item>
                                <Navbar.Divider />
                                <Navbar.Item href="#">
                                    After divider
                                </Navbar.Item>
                            </Navbar.Dropdown>
                        </Navbar.Item>
                        <Navbar.Item href="#">Second</Navbar.Item>
                    </Navbar.Container>
                    <Navbar.Container align="right">
                        <Navbar.Item href="#">At the end</Navbar.Item>
                    </Navbar.Container>
                </Navbar.Menu>
            </Navbar>

[couds]

Hi. Did you check the prop active on the Item component?

[couds]

By design all (or almost all) components of this library are mean to be controlled components, if you want to the Dropdown to be shown automatically you need to either add the hoverable prop or manage the active state

<Navbar>
  <Navbar.Brand>
    <Navbar.Item href="#">
      <img
        alt="Bulma: a modern CSS framework based on Flexbox"
        height="28"
        src="https://bulma.io/images/bulma-logo.png"
        width="112"
      />
    </Navbar.Item>
    <Navbar.Burger />
  </Navbar.Brand>
  <Navbar.Menu>
    <Navbar.Container>
      <Navbar.Item active href="#">
        <Navbar.Link>First</Navbar.Link>
        <Navbar.Dropdown>
          <Navbar.Item href="#">Subitem 1</Navbar.Item>
          <Navbar.Item href="#">Subitem 2</Navbar.Item>
          <Navbar.Divider />
          <Navbar.Item href="#"> After divider </Navbar.Item>
        </Navbar.Dropdown>
      </Navbar.Item>
      <Navbar.Item href="#">Second</Navbar.Item>
    </Navbar.Container>
    <Navbar.Container align="right">
      <Navbar.Item href="#">At the end</Navbar.Item>
    </Navbar.Container>
  </Navbar.Menu>
</Navbar>

Note that the Navbar.Item has the active prop on it

Thanks!

[ghost]

Yes, that was it. Thank you