Bootstrap: v4 docs - navbar dropdown example?

[elite123]

Is there a working example of v4 with a dropdown in a navbar?

None of the examples seem to have this implemented, or where they do it is broken:

http://v4-alpha.getbootstrap.com/examples/sticky-footer-navbar/
http://v4-alpha.getbootstrap.com/examples/offcanvas/

Thanks for any pointers

[mdo]

We've fixed much of the examples in our v4-dev branch, but haven't deployed the changes yet. We'll be supporting those eventually though (I think).

[PLJNS]

I'm trying to figure this out, and for what it's worth, this is my markup:

<nav class="navbar navbar-light bg-faded navbar-fixed-top">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
    &#9776;
    </button>
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a href="about.html" class="nav-link">About</a>
            </li>
            <li class="nav-item">
                <a href="services.html" class="nav-link">Services</a>
            </li>
            <li class="nav-item">
                <a href="contact.html" class="nav-link">Contact</a>
            </li>
            <li class="nav-item">
                <a class="dropdown-toggle nav-link" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
        <form class="form-inline navbar-form pull-right">
            <input class="form-control" type="text" placeholder="Search">
        </form>
    </div>
</nav>

And this is how it's rendered:

Not quite right, but probably my fault.

[ghost]

@PLJNS There should be .btn-group around .dropdown-toggle and .dropdown-menu. Maybe just add .btn-group class to .nav-item?

[PLJNS]

Thank you ☺️

For posterity:

<nav class="navbar navbar-light bg-faded navbar-fixed-top">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
    &#9776;
    </button>
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a href="about.html" class="nav-link">About</a>
            </li>
            <li class="nav-item">
                <a href="services.html" class="nav-link">Services</a>
            </li>
            <li class="nav-item">
                <a href="contact.html" class="nav-link">Contact</a>
            </li>
            <li class="nav-item btn-group">
                <a class="dropdown-toggle nav-link" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
        <form class="form-inline navbar-form pull-right">
            <input class="form-control" type="text" placeholder="Search">
        </form>
    </div>
</nav>

[atcraigwatson]

@mdo just come across this situation myself, do you think at this stage support for navbar dropdowns will be included in V4?

For me this would be a huge shame to see them go, part of the reason behind using Bootstrap for me was the quality of the responsive navbar.

Fingers crossed for navbar dropdowns from me!

[artob]

@PLJNS Thank you for posting your example snippet, saved me a bunch of time. I was a bit surprised none of the v4 examples had a navbar dropdown.

[twbs-lmvtfy]

Hi @rokkitpress!

You appear to have posted a live example (http://codepen.io/Craig-Watson/pen/wGLebK.html), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 9, column 1: W012: .navbar's first child element should always be either .container or .container-fluid

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[atcraigwatson]

@bendiken I have been on with this a while myself, here is what I am up to:

<!-- .navbar -->
<nav class="navbar navbar-full navbar-dark bg-primary">
    <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#mainNavbarCollapse">
    &#9776;
    </button>
    <a class="navbar-brand" href="#">
    <img class="img-rounded" src="https://placehold.it/32/ffffff?text=B">
    </a>
    <div class="collapse navbar-toggleable-md" id="mainNavbarCollapse">
        <ul class="nav navbar-nav pull-lg-right">
            <li class="nav-item">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Blog</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link" id="navbarDropdown1" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>
<!-- /.navbar -->

Some CSS is needed to make the dropdown work on smaller devices...

// Make default navbar links display block at choosen breakpoint and adjust styles to fit...
@media (max-width: 62em) {
    .navbar-nav {
        padding-top: .425rem;
        padding-left: 0.75rem;
    }
    .navbar-nav .nav-item {
        float: none;
    }
    .navbar-brand {
        float: right;
    }
    .navbar-brand,
    .navbar-nav .nav-item {
        display: block;
    }
    .navbar-nav .nav-item + .nav-item {
        margin-left: 0;
    }
    .dropdown-menu {
        position: relative;
        float: none;
    }
}

There is a working version over on codepen...

http://codepen.io/Craig-Watson/pen/wGLebK?editors=1100

Hopefully this may help

Craig

[twbs-lmvtfy]

Hi @rokkitpress!

You appear to have posted a live example (http://codepen.io/Craig-Watson/pen/wGLebK.html), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 9, column 1: W012: .navbar's first child element should always be either .container or .container-fluid

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[skyrex-mark]

I have been trying to tackle this issue. Below is what I have so far.

HTML

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <meta name="Author" content="" />
    <!--Bootstrap CSS-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
    <!--Custom CSS-->
    <link rel='stylesheet' href="css/style.css">
</head>

<body>

    <nav class="navbar navbar-light bg-faded">
        <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
            &#9776;
        </button>

        <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
            <a class="navbar-brand" href="#">Responsive navbar</a>
            <ul class="nav navbar-nav pull-sm-right">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    <ul class="dropdown list-unstyled">
                        <li class="dropdown-item"><a href="">Link 1</a></li>
                        <li class="dropdown-item"><a href="">Link 2</a></li>
                        <li class="dropdown-item"><a href="">Link 3</a></li>
                    </ul>
                </li>

                <li class="nav-item list-unstyled">
                    <a class="nav-link" href="#">Features</a>
                    <ul class="dropdown  list-unstyled">
                        <li class="dropdown-item"><a href="">Link 1</a></li>
                        <li class="dropdown-item"><a href="">Link 2</a></li>
                        <li class="dropdown-item"><a href="">Link 3</a></li>
                    </ul>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>

                    <ul class="dropdown list-unstyled">
                        <li class="dropdown-item"><a href="">Link 1</a></li>
                        <li class="dropdown-item"><a href="">Link 2</a></li>
                        <li class="dropdown-item"><a href="">Link 3</a></li>
                    </ul>

                </li>

                <li class="nav-item">
                    <a class="nav-link">About</a>

                    <ul class="dropdown list-unstyled">
                        <li class="dropdown-item"><a href="">Link 1</a></li>
                        <li class="dropdown-item"><a href="">Link 2</a></li>
                        <li class="dropdown-item"><a href="">Link 3</a></li>
                    </ul>

                </li>
            </ul>
        </div>
    </nav>
    <!--Jquery JS-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
    <script src="js/add-content.js"></script>
</body>

</html>

CSS

.dropdown {
    display: none;
    position: absolute;
    text-decoration: none;
    box-shadow: 3px 3px 5px #505050;
}

.nav-item:hover .dropdown{
    display:block;
}

.dropdown-item a {
    text-decoration: none;
    color:black;

}

[AlessandroVecchi]

i have this issue using dropdowns in a navbar collapsed.
Dropdowns are supported in navbars?

[rafalp]

Navbar is still work in progress at the moment.

[nikkijd]

I'm having an issue with 'navs' dropdown in Alpha 3 at the moment which i am unable to click the items in 'dropdown-menu' > 'ul'. The issue was seen on actual ipad air device i haven't tested in on mobile but seems to be working fine in chrome dev mobile tools. Temporarily i just create a custom js script to make it work. Just inform you guys. Thanks

<nav class="navbar">
  <button class="navbar-toggler" type="button" data-target="#navbar-ul-container">Menu</button>
  <div class="navbar-toggleable-sm" id="navbar-ul-container">
    <ul class="main-nav">
      <li class="li-item-primary dropdown">
        <a href="#" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false"><span>dropdown</span></a>
        <div class="dropdown-menu">
          <ul>
            <li><a href="#">Browse All RPGS</a></li>
            <li><a href="#">Top Rated RPGS</a></li>
            <li><a href="#">News Archive</a></li>
            <li><a href="#">Reviews</a></li>
            <li><a href="#">Previews</a></li>
            <li><a href="#">Interviews</a></li>
            <li><a href="#">Editorials</a></li>
            <li><a href="#">Forums</a></li>
          </ul>
        </div>
      </li>
      <li class="li-item-primary dropdown">
        <a href="#" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false"><span>dropdown</span></a>
        <div class="dropdown-menu">
          <ul>
            <li><a href="http://youtube.com">Alpha Protocol</a></li>
            <li><a href="#">Baldur's Gate: Dark Alliance</a></li>
            <li><a href="#">Baldur's Gate: Dark Alliance II</a></li>
            <li><a href="#">Champions: Return to Arms</a></li>
            <li><a href="#">Dungeons &amp; Dragons Dragonshard</a></li>
            <li><a href="#">Item 3a</a></li>
            <li><a href="#">Item 1a</a></li>
            <li><a href="#">Item 2a</a></li>
            <li><a href="#">Item 3a</a></li>
            <li><a href="#">Item 1a</a></li>
            <li><a href="#">Item 2a</a></li>
            <li><a href="#">Item 3a</a></li>
            <li><a href="#">Item 1a</a></li>
            <li><a href="#">Item 2a</a></li>
            <li><a href="#">Item 3a</a></li>
            <li><a href="#">Item 1a</a></li>
            <li><a href="#">Item 2a</a></li>
            <li><a href="#">Item 3a</a></li>
            <li><a href="#">Item 2a</a></li>
            <li><a href="#">Item 2a</a></li>
          </ul>
        </div>
      </li>
      <li class="li-item-primary">
        <a href="#"><span>Login/Register</span></a>
      </li>
    </ul>
  </div>
</nav>

[andegre]

@nikkijd is this fixed in alpha 3? If not, can you post your hack to fix this as it's my last "bug" to fix with Bootstrap 4 before I can release.

[ronnyandre]

@andegre You shouldn't use alpha versions in production environments.

[mdo]

Added in #19890.

[gpakosz]

This is issue is marked as closed however, when visiting https://v4-alpha.getbootstrap.com/examples/navbar-top-fixed/, the nav bar contains nothing but the toggler.

    <div class="pos-f-t">
      <div class="collapse" id="navbar-header">
        <div class="container-fluid bg-inverse p-1">
          <h3>Collapsed content</h3>
          <p>Toggleable via the navbar brand.</p>
        </div>
      </div>
      <div class="navbar navbar-light bg-faded navbar-static-top">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
      </div>
    </div>

What's the deal? Is there a proper place to open issues against the website itself?

[Johann-S]

The proper place to open issues about the documentation or exemples is here so you should create a new issue here @gpakosz