Menu and submenu with bootstrap

Asked

Viewed 24,789 times

3

I’m trying to add a sub-item below about but I’m not getting it. I tested with the tags ul and li, but it didn’t work.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
       <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
       </ul>
</div>

Any suggestions?

bootstrap-3

  • Nested dropdowns: https://vsn4ik.github.io/bootstrap-submenu/

4 answers

9


    <ul class="nav nav-pills">
...
      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li>SubMenu1</li>
          <li>SubMenu2</li>
        </ul>
      </li>
     ...
    </ul>

More details look: http://getbootstrap.com/components/#Nav

  • That way it worked, thank you.

  • There’s nothing to it... :)

6

I don’t know if it’s what you want, but here it worked like this:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
       <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                            <ul>
                                <li><a href="#">Teste</a></li>
                            </ul>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
       </ul>
</div>
  • 1

    That way everything came out disfigured, but thanks for the help :)

2

Testing with this structure:

<ul class="nav nav-tabs">
 ...
 <li role="presentation" class="dropdown">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
   Dropdown <span class="caret"></span>
   </a>
    <ul class="dropdown-menu">
     ...
    </ul>
  </li>
...
</ul>

  • That way it worked. Thank you.

2

In the documentation shows the basic example of a dropdown in the following structure:

li
  > a 
  > ul
     > li
     > + li's ...
  > /ul
/li

Where <a> reference the menu <ul> anchorage.

To work only include the class dropdown in the <li> father and classes dropdown in the attribute data-toggle and dropdown-toggle in tag class <a> and refer using the class dropdown-menu in the <ul>, thus:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
  <ul class="nav navbar-nav">

    <li class="dropdown">

      <a href="#" data-toggle="dropdown" class="dropdown-toggle"> About <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Enterprise</a></li>
        <li><a href="#">Autor</a></li>
        <li><a href="#">Something else</a></li>
      </ul>

    </li>

    <li>
      <a href="#">Services</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</div>

See working on jsfiddle

Browser other questions tagged bootstrap-3

You are not signed in. Login or sign up in order to post.