1 module uim.bootstrap.bs5.demos.examples.navbars; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("examples/navbars", new class DH5AppPage { 7 this() { 8 super(); 9 this 10 .created(DateTime(2020, 12, 20, 10, 10, 0)) 11 .changed(timeLastModified(__FILE_FULL_PATH__)) 12 .parameters([ 13 "pageTitle": "Starter Page - Bootstrap 5 Demo", 14 ]).styles(` 15 body { 16 padding-bottom: 20px; 17 } 18 .navbar { 19 margin-bottom: 20px; 20 } 21 .bd-placeholder-img { 22 font-size: 1.125rem; 23 text-anchor: middle; 24 -webkit-user-select: none; 25 -moz-user-select: none; 26 user-select: none; 27 } 28 29 @media (min-width: 768px) { 30 .bd-placeholder-img-lg { 31 font-size: 3.5rem; 32 } 33 }`) 34 .styles(["href":"navbar.css", "rel":"stylesheet"]); 35 } 36 37 override string content() { 38 39 return 40 ` 41 <main> 42 H5Nav(["navbar navbar-dark bg-dark", "aria-label":"First navbar example"], 43 H5Div(["container-fluid"], 44 H5A(["navbar-brand"], ["href":"#"], Never expand"), 45 H5Button(["navbar-toggler" "type":"button" data-bs-toggle="collapse" data-bs-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false", "aria-label":"Toggle navigation"> 46 H5Span(["navbar-toggler-icon"]) 47 ) 48 49 H5Div("navbarsExample01", ["collapse navbar-collapse"], 50 BS5NavbarNav(["me-auto mb-2"], 51 BS5NavItem(["active"], 52 BS5NavLink( aria-current="page"], ["href":"#"], Home"), 53 ), 54 BS5NavItem( 55 BS5NavLink( "href":"#"], Link"), 56 ), 57 BS5NavItem( 58 BS5NavLink(["disabled"], ["href":"#" tabindex="-1" aria-disabled="true">Disabled"), 59 ), 60 BS5NavItem(["dropdown"], 61 BS5NavLink("dropdown01", ["dropdown-toggle"], ["href":"#", "data-bs-toggle":"dropdown", "aria-expanded":"false"], "Dropdown"), 62 BS5Dropdownmenu(["aria-labelledby":"dropdown01"], 63 H5Li(BS5DropdownItem(["href":"#"], Action")), 64 H5Li(BS5DropdownItem(["href":"#"], Another action")), 65 H5Li(BS5DropdownItem(["href":"#"], Something else here")) 66 ) 67 ), 68 ), 69 <form> 70 <input class="form-control" "type":"text" "placeholder":"Search", "aria-label":"Search"> 71 ) 72 ), 73 ), 74 ), 75 76 H5Nav(["navbar navbar-expand navbar-dark bg-dark", "aria-label":"Second navbar example"], 77 H5Div(["container-fluid"], 78 H5A(["navbar-brand"], ["href":"#"], Always expand"), 79 H5Button(["navbar-toggler" "type":"button" data-bs-toggle="collapse" data-bs-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false", "aria-label":"Toggle navigation"> 80 H5Span(["navbar-toggler-icon"]) 81 ) 82 83 H5Div(["collapse navbar-collapse" id="navbarsExample02"], 84 BS5NavbarNav(["me-auto"], 85 BS5NavItem(["active"], 86 BS5NavLink( aria-current="page"], ["href":"#"], Home"), 87 ), 88 BS5NavItem( 89 BS5NavLink( "href":"#"], Link"), 90 ), 91 ), 92 <form> 93 <input class="form-control" "type":"text" "placeholder":"Search", "aria-label":"Search"> 94 ) 95 ), 96 ), 97 ), 98 99 H5Nav(["navbar navbar-expand-sm navbar-dark bg-dark", "aria-label":"Third navbar example"], 100 H5Div(["container-fluid"], 101 H5A(["navbar-brand"], ["href":"#"], Expand at sm"), 102 H5Button(["navbar-toggler" "type":"button" data-bs-toggle="collapse" data-bs-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false", "aria-label":"Toggle navigation"> 103 H5Span(["navbar-toggler-icon"]) 104 ) 105 106 H5Div(["collapse navbar-collapse" id="navbarsExample03"], 107 BS5NavbarNav(["me-auto mb-2 mb-sm-0"], 108 BS5NavItem(["active"], 109 BS5NavLink( aria-current="page"], ["href":"#"], Home"), 110 ), 111 BS5NavItem( 112 BS5NavLink( "href":"#"], Link"), 113 ), 114 BS5NavItem( 115 BS5NavLink(["disabled"], ["href":"#" tabindex="-1" aria-disabled="true">Disabled"), 116 ), 117 BS5NavItem(["dropdown"], 118 BS5NavLink(["dropdown-toggle"], ["href":"#" id="dropdown03" data-bs-toggle="dropdown" aria-expanded="false">Dropdown"), 119 H5Ul(["dropdown-menu" aria-labelledby="dropdown03"], 120 H5Li("BS5DropdownItem(["href":"#"], Action")), 121 H5Li("BS5DropdownItem(["href":"#"], Another action")), 122 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 123 ), 124 ), 125 ), 126 <form> 127 <input class="form-control" "type":"text" "placeholder":"Search", "aria-label":"Search"> 128 ) 129 ), 130 ), 131 ), 132 133 H5Nav(["navbar navbar-expand-md navbar-dark bg-dark", "aria-label":"Fourth navbar example"], 134 H5Div(["container-fluid"], 135 H5A(["navbar-brand"], ["href":"#"], Expand at md"), 136 H5Button(["navbar-toggler" "type":"button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false", "aria-label":"Toggle navigation"> 137 H5Span(["navbar-toggler-icon"]) 138 ) 139 140 H5Div(["collapse navbar-collapse" id="navbarsExample04"], 141 BS5NavbarNav(["me-auto mb-2 mb-md-0"], 142 BS5NavItem(["active"], 143 BS5NavLink( aria-current="page"], ["href":"#"], Home"), 144 ), 145 BS5NavItem( 146 BS5NavLink( "href":"#"], Link"), 147 ), 148 BS5NavItem( 149 BS5NavLink(["disabled"], ["href":"#" tabindex="-1" aria-disabled="true">Disabled"), 150 ), 151 BS5NavItem(["dropdown"], 152 BS5NavLink(["dropdown-toggle"], ["href":"#" id="dropdown04" data-bs-toggle="dropdown" aria-expanded="false">Dropdown"), 153 H5Ul(["dropdown-menu" aria-labelledby="dropdown04"], 154 H5Li("BS5DropdownItem(["href":"#"], Action")), 155 H5Li("BS5DropdownItem(["href":"#"], Another action")), 156 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 157 ), 158 ), 159 ), 160 <form> 161 <input class="form-control" "type":"text" "placeholder":"Search", "aria-label":"Search"> 162 ) 163 ), 164 ), 165 ), 166 167 H5Nav(["navbar navbar-expand-lg navbar-dark bg-dark", "aria-label":"Fifth navbar example"> 168 H5Div(["container-fluid"> 169 H5A(["navbar-brand"], ["href":"#"], Expand at lg"), 170 H5Button(["navbar-toggler" "type":"button" data-bs-toggle="collapse" data-bs-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false", "aria-label":"Toggle navigation"> 171 H5Span(["navbar-toggler-icon"]) 172 ) 173 174 H5Div(["collapse navbar-collapse" id="navbarsExample05"> 175 BS5NavbarNav(["me-auto mb-2 mb-lg-0"> 176 BS5NavItem(["active"], 177 BS5NavLink( aria-current="page"], ["href":"#"], Home"), 178 ), 179 BS5NavItem( 180 BS5NavLink( "href":"#"], Link"), 181 ), 182 BS5NavItem( 183 BS5NavLink(["disabled"], ["href":"#" tabindex="-1" aria-disabled="true">Disabled"), 184 ), 185 BS5NavItem(["dropdown"> 186 BS5NavLink(["dropdown-toggle"], ["href":"#" id="dropdown05" data-bs-toggle="dropdown" aria-expanded="false">Dropdown"), 187 H5Ul(["dropdown-menu" aria-labelledby="dropdown05"> 188 H5Li("BS5DropdownItem(["href":"#"], Action")), 189 H5Li("BS5DropdownItem(["href":"#"], Another action")), 190 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 191 ), 192 ), 193 ), 194 <form> 195 <input class="form-control" "type":"text" "placeholder":"Search", "aria-label":"Search"> 196 ) 197 ), 198 ), 199 ), 200 201 H5Nav(["navbar navbar-expand-xl navbar-dark bg-dark", "aria-label":"Sixth navbar example"> 202 H5Div(["container-fluid"> 203 H5A(["navbar-brand"], ["href":"#"], Expand at xl"), 204 H5Button(["navbar-toggler" "type":"button" data-bs-toggle="collapse" data-bs-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false", "aria-label":"Toggle navigation"], 205 H5Span(["navbar-toggler-icon"]) 206 ) 207 208 H5Div(["collapse navbar-collapse" id="navbarsExample06"], 209 BS5NavbarNav(["me-auto mb-2 mb-xl-0"> 210 BS5NavItem(["active"], 211 BS5NavLink( aria-current="page"], ["href":"#"], Home"), 212 ), 213 BS5NavItem( 214 BS5NavLink( "href":"#"], Link"), 215 ), 216 BS5NavItem( 217 BS5NavLink(["disabled"], ["href":"#" tabindex="-1" aria-disabled="true">Disabled"), 218 ), 219 BS5NavItem(["dropdown"> 220 BS5NavLink(["dropdown-toggle"], ["href":"#" id="dropdown06" data-bs-toggle="dropdown" aria-expanded="false">Dropdown"), 221 H5Ul(["dropdown-menu" aria-labelledby="dropdown06"> 222 H5Li("BS5DropdownItem(["href":"#"], Action")), 223 H5Li("BS5DropdownItem(["href":"#"], Another action")), 224 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 225 ), 226 ), 227 ), 228 <form> 229 <input class="form-control" "type":"text" "placeholder":"Search", "aria-label":"Search"> 230 ) 231 ), 232 ), 233 ), 234 235 H5Nav(["navbar navbar-expand-xxl navbar-dark bg-dark", "aria-label":"Seventh navbar example"], 236 H5Div(["container-fluid"], 237 H5A(["navbar-brand"], ["href":"#"], Expand at xxl"), 238 H5Button(["navbar-toggler" "type":"button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false", "aria-label":"Toggle navigation"> 239 H5Span(["navbar-toggler-icon"]) 240 ) 241 242 H5Div(["collapse navbar-collapse" id="navbarsExampleXxl"], 243 BS5NavbarNav(["me-auto mb-2 mb-xl-0"], 244 BS5NavItem(["active"], 245 BS5NavLink( aria-current="page"], ["href":"#"], Home"), 246 ), 247 BS5NavItem( 248 BS5NavLink( "href":"#"], Link"), 249 ), 250 BS5NavItem( 251 BS5NavLink(["disabled"], ["href":"#" tabindex="-1" aria-disabled="true">Disabled"), 252 ), 253 BS5NavItem(["dropdown"], 254 BS5NavLink(["dropdown-toggle"], ["href":"#" id="dropdownXxl" data-bs-toggle="dropdown" aria-expanded="false">Dropdown"), 255 H5Ul(["dropdown-menu" aria-labelledby="dropdownXxl"], 256 H5Li("BS5DropdownItem(["href":"#"], Action")), 257 H5Li("BS5DropdownItem(["href":"#"], Another action")), 258 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 259 ), 260 ), 261 ), 262 <form> 263 <input class="form-control" "type":"text" "placeholder":"Search", "aria-label":"Search"> 264 ) 265 ), 266 ), 267 ), 268 269 H5Nav(["navbar navbar-expand-lg navbar-dark bg-dark", "aria-label":"Eighth navbar example"], 270 H5Div(["container"], 271 H5A(["navbar-brand"], ["href":"#"], Container"), 272 H5Button(["navbar-toggler" "type":"button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false", "aria-label":"Toggle navigation"> 273 H5Span(["navbar-toggler-icon"]) 274 ) 275 276 H5Div(["collapse navbar-collapse" id="navbarsExample07"], 277 BS5NavbarNav(["me-auto mb-2 mb-lg-0"], 278 BS5NavItem(["active"], 279 BS5NavLink( aria-current="page"], ["href":"#"], Home"), 280 ), 281 BS5NavItem( 282 BS5NavLink( "href":"#"], Link"), 283 ), 284 BS5NavItem( 285 BS5NavLink(["disabled"], ["href":"#" tabindex="-1" aria-disabled="true">Disabled"), 286 ), 287 BS5NavItem(["dropdown"], 288 BS5NavLink(["dropdown-toggle"], ["href":"#" id="dropdown07" data-bs-toggle="dropdown" aria-expanded="false">Dropdown"), 289 H5Ul(["dropdown-menu" aria-labelledby="dropdown07"], 290 H5Li("BS5DropdownItem(["href":"#"], Action")), 291 H5Li("BS5DropdownItem(["href":"#"], Another action")), 292 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 293 ), 294 ), 295 ), 296 <form> 297 <input class="form-control" "type":"text" "placeholder":"Search", "aria-label":"Search"> 298 ) 299 ), 300 ), 301 ), 302 303 H5Nav(["navbar navbar-expand-lg navbar-dark bg-dark", "aria-label":"Ninth navbar example"], 304 H5Div(["container-xl"], 305 H5A(["navbar-brand"], ["href":"#"], Container XL"), 306 H5Button(["navbar-toggler" "type":"button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false", "aria-label":"Toggle navigation"> 307 H5Span(["navbar-toggler-icon"]) 308 ) 309 310 H5Div(["collapse navbar-collapse" id="navbarsExample07XL"], 311 BS5NavbarNav(["me-auto mb-2 mb-lg-0"], 312 BS5NavItem(["active"], 313 BS5NavLink( aria-current="page"], ["href":"#"], Home"), 314 ), 315 BS5NavItem( 316 BS5NavLink( "href":"#"], Link"), 317 ), 318 BS5NavItem( 319 BS5NavLink(["disabled"], ["href":"#" tabindex="-1" aria-disabled="true">Disabled"), 320 ), 321 BS5NavItem(["dropdown"> 322 BS5NavLink(["dropdown-toggle"], ["href":"#" id="dropdown07XL" data-bs-toggle="dropdown" aria-expanded="false">Dropdown"), 323 H5Ul(["dropdown-menu" aria-labelledby="dropdown07XL"], 324 H5Li("BS5DropdownItem(["href":"#"], Action")), 325 H5Li("BS5DropdownItem(["href":"#"], Another action")), 326 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 327 ), 328 ), 329 ), 330 <form> 331 <input class="form-control" "type":"text" "placeholder":"Search", "aria-label":"Search"> 332 ) 333 ), 334 ), 335 ), 336 337 H5Div(["container-xl mb-4"> 338 H5P("Matching .container-xl...") 339 ), 340 341 H5Nav(["navbar navbar-expand-lg navbar-dark bg-dark", "aria-label":"Tenth navbar example"], 342 H5Div(["container-fluid"], 343 H5Button(["navbar-toggler" "type":"button" data-bs-toggle="collapse" data-bs-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false", "aria-label":"Toggle navigation"> 344 H5Span(["navbar-toggler-icon"]) 345 ) 346 347 H5Div(["collapse navbar-collapse justify-content-md-center" id="navbarsExample08"], 348 H5Ul(["navbar-nav"], 349 BS5NavItem(["active"], 350 BS5NavLink( aria-current="page"], ["href":"#"], Centered nav only"), 351 ), 352 BS5NavItem( 353 BS5NavLink( "href":"#"], Link"), 354 ), 355 BS5NavItem( 356 BS5NavLink(["disabled"], ["href":"#" tabindex="-1" aria-disabled="true">Disabled"), 357 ), 358 BS5NavItem(["dropdown"], 359 BS5NavLink(["dropdown-toggle"], ["href":"#" id="dropdown08" data-bs-toggle="dropdown" aria-expanded="false">Dropdown"), 360 H5Ul(["dropdown-menu" aria-labelledby="dropdown08"], 361 H5Li("BS5DropdownItem(["href":"#"], Action")), 362 H5Li("BS5DropdownItem(["href":"#"], Another action")), 363 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 364 ), 365 ), 366 ), 367 ), 368 ), 369 ), 370 371 H5Div(["container"], 372 H5Nav(["navbar navbar-expand-lg navbar-light bg-light rounded", "aria-label":"Eleventh navbar example"], 373 H5Div(["container-fluid"], 374 H5A(["navbar-brand"], ["href":"#"], Navbar"), 375 H5Button(["navbar-toggler" "type":"button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false", "aria-label":"Toggle navigation"> 376 H5Span(["navbar-toggler-icon"]) 377 ) 378 379 H5Div(["collapse navbar-collapse" id="navbarsExample09"], 380 BS5NavbarNav(["me-auto mb-2 mb-lg-0"], 381 BS5NavItem(["active"], 382 BS5NavLink( aria-current="page"], ["href":"#"], Home"), 383 ), 384 BS5NavItem( 385 BS5NavLink( "href":"#"], Link"), 386 ), 387 BS5NavItem( 388 BS5NavLink(["disabled"], ["href":"#" tabindex="-1" aria-disabled="true">Disabled"), 389 ), 390 BS5NavItem(["dropdown"], 391 BS5NavLink(["dropdown-toggle"], ["href":"#" id="dropdown09" data-bs-toggle="dropdown" aria-expanded="false">Dropdown"), 392 H5Ul(["dropdown-menu" aria-labelledby="dropdown09"], 393 H5Li("BS5DropdownItem(["href":"#"], Action")), 394 H5Li("BS5DropdownItem(["href":"#"], Another action")), 395 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 396 ), 397 ), 398 ), 399 <form> 400 <input class="form-control" "type":"text" "placeholder":"Search", "aria-label":"Search"> 401 ) 402 ), 403 ), 404 ), 405 406 H5Nav(["navbar navbar-expand-lg navbar-light bg-light rounded", "aria-label":"Twelfth navbar example"], 407 H5Div(["container-fluid"], 408 H5Button(["navbar-toggler" "type":"button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false", "aria-label":"Toggle navigation"> 409 H5Span(["navbar-toggler-icon"]) 410 ) 411 412 H5Div(["collapse navbar-collapse justify-content-md-center" id="navbarsExample10"> 413 H5Ul(["navbar-nav"> 414 BS5NavItem(["active"], 415 BS5NavLink( aria-current="page"], ["href":"#"], Centered nav only"), 416 ), 417 BS5NavItem( 418 BS5NavLink( "href":"#"], Link"), 419 ), 420 BS5NavItem( 421 BS5NavLink(["disabled"], ["href":"#" tabindex="-1" aria-disabled="true">Disabled"), 422 ), 423 BS5NavItem(["dropdown"], 424 BS5NavLink(["dropdown-toggle"], ["href":"#" id="dropdown10" data-bs-toggle="dropdown" aria-expanded="false">Dropdown"), 425 H5Ul(["dropdown-menu" aria-labelledby="dropdown10"], 426 H5Li("BS5DropdownItem(["href":"#"], Action")), 427 H5Li("BS5DropdownItem(["href":"#"], Another action")), 428 H5Li("BS5DropdownItem(["href":"#"], Something else here")), 429 ), 430 ), 431 ), 432 ), 433 ), 434 ), 435 436 H5Div( 437 H5Div(["bg-light p-5 rounded"], 438 H5Div(["col-sm-8 mx-auto"], 439 H5H1("Navbar examples"), 440 H5P("This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the H5A(["../examples/navbar-static/">top"), and H5A(["../examples/navbar-fixed/">fixed top"), examples.") 441 H5P("At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.") 442 H5P(" 443 H5A(["btn btn-primary" href="../components/navbar/" "role":"button">View navbar docs »"), 444 ") 445 ), 446 ), 447 ), 448 ), 449 ) 450 `; 451 452 } 453 }); 454 } 455