Skip to content

[Bug]: (nav, sideNav, Dropdown) Incorrect handling of dropdown menu visibility when using nav and sidenav #515

Closed
@gselderslaghs

Description

@gselderslaghs

Before submitting...

Context

Implementing a dropdown button inside navbar and sidenav results in not showing the dropdown menu when clicked on desktop version.

Codepen

Materialize navbar sideNav Dropdown

Current Behavior

I've implemented a dropdown menu as suggested by the Materialize documentation Navbar Dropdown Menu

I've extended the setup with the sideNav component
The dropdown HTML element is only appended next to the latest triggering element on the page
When activating the dropdown trigger from the desktop nav, this results in the dropdown component is not being visible to the end user, since the sidenav is not opened at this state. When you activate the sidenav in mobile mode, the dropdown is functioning as expected

Expected behavior

The dropdown element should be visible, in any case, when a trigger for the element is activated

Possible Solutions or Causes

As it would be possible to workaround by adding an additional dropdown with exactly the same items but with a different id and data-target, this would be a very dirty workaround

Ideally we should analyse possible solutions on how this could be fixed

  • within the nav and sidenav setup and without affecting the dropdown component since it has a broader usage
  • with a single dropdown component declaration that is triggered from nav and sidenav

Steps to reproduce

  1. Implement the nav and sidenav component
  2. Implement a single dropdown component
  3. Implement the dropdown trigger link in nav and sidenav

Your Environment

  • Version used: 2.1.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions