| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link href="../../../dist/css/bootstrap.min.css" rel="stylesheet"> |
| <title>Menu</title> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>Menu <small>Bootstrap Visual Test</small></h1> |
| |
| <nav class="navbar md:navbar-expand"> |
| <a class="navbar-brand" href="#">Navbar</a> |
| <button class="navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> |
| <span class="navbar-toggler-icon"></span> |
| </button> |
| |
| <dialog class="drawer drawer-end" tabindex="-1" id="navbarResponsive" aria-labelledby="navbarResponsiveLabel"> |
| <div class="drawer-header"> |
| <h5 class="drawer-title" id="navbarResponsiveLabel">Menu</h5> |
| <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close"></button> |
| </div> |
| <div class="drawer-body"> |
| <ul class="navbar-nav"> |
| <li class="nav-item"> |
| <a class="nav-link active" href="#" aria-current="page">Home</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link" href="#">Link</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link" href="#">Link</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a> |
| <div class="menu"> |
| <a class="menu-item" href="#">Action</a> |
| <a class="menu-item" href="#">Another action</a> |
| <a class="menu-item" href="#">Something else here</a> |
| </div> |
| </li> |
| </ul> |
| </div> |
| </dialog> |
| </nav> |
| |
| <ul class="nav nav-pills mt-3"> |
| <li class="nav-item"> |
| <a class="nav-link active" href="#">Active</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link" href="#">Link</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link" href="#">Link</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a> |
| <div class="menu"> |
| <a class="menu-item" href="#">Action</a> |
| <a class="menu-item" href="#">Another action</a> |
| <a class="menu-item" href="#">Something else here</a> |
| </div> |
| </li> |
| </ul> |
| |
| <div class="row"> |
| <div class="sm:col-12 mt-4"> |
| <div> |
| <button type="button" class="btn-solid theme-secondary" data-bs-toggle="menu" aria-expanded="false">Menu</button> |
| <div class="menu"> |
| <input id="textField" type="text"> |
| </div> |
| </div> |
| <div class="btn-group"> |
| <button type="button" class="btn-solid theme-secondary">Menu (top) split</button> |
| <button type="button" class="btn-solid theme-secondary" data-bs-toggle="menu" data-bs-placement="top-start" aria-expanded="false"> |
| <span class="visually-hidden">Menu (top) split</span> |
| </button> |
| <div class="menu"> |
| <a class="menu-item" href="#">Action</a> |
| <a class="menu-item" href="#">Another action</a> |
| <a class="menu-item" href="#">Something else here</a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="sm:col-12 mt-4"> |
| <div class="btn-group"> |
| <button type="button" class="btn-solid theme-secondary" data-bs-toggle="menu" data-bs-placement="top-start" aria-expanded="false">Menu (top)</button> |
| <div class="menu"> |
| <a class="menu-item" href="#">Action</a> |
| <a class="menu-item" href="#">Another action</a> |
| <a class="menu-item" href="#">Something else here</a> |
| </div> |
| </div> |
| |
| <div class="btn-group"> |
| <button type="button" class="btn-solid theme-secondary" data-bs-toggle="menu" data-bs-placement="bottom-end" aria-expanded="false"> |
| This menu is end-aligned |
| </button> |
| <div class="menu"> |
| <button class="menu-item" type="button">Action</button> |
| <button class="menu-item" type="button">Another action</button> |
| <button class="menu-item" type="button">Something else here</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="sm:col-12 mt-4"> |
| <div class="btn-group"> |
| <a href="#" class="btn-solid theme-secondary">Menu (top) split align end</a> |
| <button type="button" id="menu-page-subheader-button-3" class="btn-solid theme-secondary menu-toggle-split" data-bs-toggle="menu" data-bs-placement="top-end" aria-expanded="false"> |
| <span class="visually-hidden">Product actions</span> |
| </button> |
| <div class="menu"> |
| <button class="menu-item" type="button">Action</button> |
| <button class="menu-item" type="button">Another action</button> |
| <button class="menu-item" type="button">Something else here with a long text</button> |
| </div> |
| </div> |
| <div class="btn-group"> |
| <button type="button" class="btn-solid theme-secondary" data-bs-toggle="menu" data-bs-placement="top-end" aria-expanded="false">Menu (top) align end</button> |
| <div class="menu"> |
| <button class="menu-item" type="button">Action</button> |
| <button class="menu-item" type="button">Another action</button> |
| <button class="menu-item" type="button">Something else here with a long text</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="sm:col-12 mt-4"> |
| <div class="btn-group"> |
| <a href="#" class="btn-solid theme-secondary">Menu (end) split</a> |
| <button type="button" id="menu-page-subheader-button-4" class="btn-solid theme-secondary menu-toggle-split" data-bs-toggle="menu" data-bs-placement="right-start" aria-expanded="false"> |
| <span class="visually-hidden">Product actions</span> |
| </button> |
| <div class="menu"> |
| <button class="menu-item" type="button">Action</button> |
| <button class="menu-item" type="button">Another action</button> |
| <button class="menu-item" type="button">Something else here with a long text</button> |
| </div> |
| </div> |
| <div class="btn-group"> |
| <button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" data-bs-placement="right-start" aria-expanded="false"> |
| Menu (end) |
| </button> |
| <div class="menu"> |
| <button class="menu-item" type="button">Action</button> |
| <button class="menu-item" type="button">Another action</button> |
| <button class="menu-item" type="button">Something else here</button> |
| </div> |
| </div> |
| <div class="btn-group"> |
| <a href="#" class="btn-solid theme-secondary">Menu (start) split</a> |
| <button type="button" id="menu-page-subheader-button-5" class="btn-solid theme-secondary menu-toggle-split" data-bs-toggle="menu" data-bs-placement="left-start" aria-expanded="false"> |
| <span class="visually-hidden">Product actions</span> |
| </button> |
| <div class="menu"> |
| <button class="menu-item" type="button">Action</button> |
| <button class="menu-item" type="button">Another action</button> |
| <button class="menu-item" type="button">Something else here with a long text</button> |
| </div> |
| </div> |
| <div class="btn-group"> |
| <button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" data-bs-placement="left-start" aria-expanded="false"> |
| Menu (start) |
| </button> |
| <div class="menu"> |
| <button class="menu-item" type="button">Action</button> |
| <button class="menu-item" type="button">Another action</button> |
| <button class="menu-item" type="button">Something else here</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="row"> |
| <div class="sm:col-3 mt-4"> |
| <div class="btn-group"> |
| <button type="button" class="btn-solid theme-secondary">Menu reference</button> |
| <button type="button" class="btn-solid theme-secondary" data-bs-toggle="menu" aria-expanded="false" data-bs-reference="parent"> |
| <span class="visually-hidden">Menu split</span> |
| </button> |
| <div class="menu"> |
| <a class="menu-item" href="#">Action</a> |
| <a class="menu-item" href="#">Another action</a> |
| <a class="menu-item" href="#">Something else here</a> |
| </div> |
| </div> |
| </div> |
| <div class="sm:col-3 mt-4"> |
| <div> |
| <button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" data-bs-display="static" aria-expanded="false"> |
| Menu with static display |
| </button> |
| <div class="menu"> |
| <a class="menu-item" href="#">Action</a> |
| <a class="menu-item" href="#">Another action</a> |
| <a class="menu-item" href="#">Something else here</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <script src="../../../dist/js/bootstrap.bundle.js" type="module"></script> |
| </body> |
| </html> |
