2022-05-13 20:19:48 +03:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "description" content = "" >
< meta name = "author" content = "Mark Otto, Jacob Thornton, and Bootstrap contributors" >
2022-10-03 10:55:07 +03:00
< meta name = "generator" content = "Hugo 0.104.2" >
2022-05-13 20:19:48 +03:00
< title > Offcanvas navbar template · Bootstrap v5.2< / title >
< link rel = "canonical" href = "https://getbootstrap.com/docs/5.2/examples/offcanvas-navbar/" >
2022-11-22 09:51:50 +02:00
< link href = "/docs/5.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin = "anonymous" >
2022-05-13 20:19:48 +03:00
<!-- Favicons -->
< link rel = "apple-touch-icon" href = "/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes = "180x180" >
< link rel = "icon" href = "/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes = "32x32" type = "image/png" >
< link rel = "icon" href = "/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes = "16x16" type = "image/png" >
< link rel = "manifest" href = "/docs/5.2/assets/img/favicons/manifest.json" >
< link rel = "mask-icon" href = "/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color = "#712cf9" >
< link rel = "icon" href = "/docs/5.2/assets/img/favicons/favicon.ico" >
< meta name = "theme-color" content = "#712cf9" >
< style >
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
< / style >
<!-- Custom styles for this template -->
< link href = "offcanvas.css" rel = "stylesheet" >
< / head >
< body class = "bg-light" >
< nav class = "navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label = "Main navigation" >
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" > Offcanvas navbar< / a >
< button class = "navbar-toggler p-0 border-0" type = "button" id = "navbarSideCollapse" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "navbar-collapse offcanvas-collapse" id = "navbarsExampleDefault" >
< ul class = "navbar-nav me-auto mb-2 mb-lg-0" >
< li class = "nav-item" >
< a class = "nav-link active" aria-current = "page" href = "#" > Dashboard< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Notifications< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Profile< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Switch account< / a >
< / li >
< li class = "nav-item dropdown" >
2022-07-19 18:48:29 +03:00
< a class = "nav-link dropdown-toggle" href = "#" data-bs-toggle = "dropdown" aria-expanded = "false" > Settings< / a >
< ul class = "dropdown-menu" >
2022-05-13 20:19:48 +03:00
< 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 >
< / ul >
< form class = "d-flex" role = "search" >
< input class = "form-control me-2" type = "search" placeholder = "Search" aria-label = "Search" >
< button class = "btn btn-outline-success" type = "submit" > Search< / button >
< / form >
< / div >
< / div >
< / nav >
< div class = "nav-scroller bg-body shadow-sm" >
< nav class = "nav" aria-label = "Secondary navigation" >
< a class = "nav-link active" aria-current = "page" href = "#" > Dashboard< / a >
< a class = "nav-link" href = "#" >
Friends
2022-07-19 18:48:29 +03:00
< span class = "badge text-bg-light rounded-pill align-text-bottom" > 27< / span >
2022-05-13 20:19:48 +03:00
< / a >
< a class = "nav-link" href = "#" > Explore< / a >
< a class = "nav-link" href = "#" > Suggestions< / a >
< a class = "nav-link" href = "#" > Link< / a >
< a class = "nav-link" href = "#" > Link< / a >
< a class = "nav-link" href = "#" > Link< / a >
< a class = "nav-link" href = "#" > Link< / a >
< a class = "nav-link" href = "#" > Link< / a >
< / nav >
< / div >
< main class = "container" >
< div class = "d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm" >
< img class = "me-3" src = "/docs/5.2/assets/brand/bootstrap-logo-white.svg" alt = "" width = "48" height = "38" >
< div class = "lh-1" >
< h1 class = "h6 mb-0 text-white lh-1" > Bootstrap< / h1 >
< small > Since 2011< / small >
< / div >
< / div >
< div class = "my-3 p-3 bg-body rounded shadow-sm" >
< h6 class = "border-bottom pb-2 mb-0" > Recent updates< / h6 >
< div class = "d-flex text-muted pt-3" >
< svg class = "bd-placeholder-img flex-shrink-0 me-2 rounded" width = "32" height = "32" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: 32x32" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#007bff" / > < text x = "50%" y = "50%" fill = "#007bff" dy = ".3em" > 32x32< / text > < / svg >
< p class = "pb-3 mb-0 small lh-sm border-bottom" >
< strong class = "d-block text-gray-dark" > @username< / strong >
Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps?
< / p >
< / div >
< div class = "d-flex text-muted pt-3" >
< svg class = "bd-placeholder-img flex-shrink-0 me-2 rounded" width = "32" height = "32" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: 32x32" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#e83e8c" / > < text x = "50%" y = "50%" fill = "#e83e8c" dy = ".3em" > 32x32< / text > < / svg >
< p class = "pb-3 mb-0 small lh-sm border-bottom" >
< strong class = "d-block text-gray-dark" > @username< / strong >
Some more representative placeholder content, related to this other user. Another status update, perhaps.
< / p >
< / div >
< div class = "d-flex text-muted pt-3" >
< svg class = "bd-placeholder-img flex-shrink-0 me-2 rounded" width = "32" height = "32" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: 32x32" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#6f42c1" / > < text x = "50%" y = "50%" fill = "#6f42c1" dy = ".3em" > 32x32< / text > < / svg >
< p class = "pb-3 mb-0 small lh-sm border-bottom" >
< strong class = "d-block text-gray-dark" > @username< / strong >
This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates.
< / p >
< / div >
< small class = "d-block text-end mt-3" >
< a href = "#" > All updates< / a >
< / small >
< / div >
< div class = "my-3 p-3 bg-body rounded shadow-sm" >
< h6 class = "border-bottom pb-2 mb-0" > Suggestions< / h6 >
< div class = "d-flex text-muted pt-3" >
< svg class = "bd-placeholder-img flex-shrink-0 me-2 rounded" width = "32" height = "32" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: 32x32" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#007bff" / > < text x = "50%" y = "50%" fill = "#007bff" dy = ".3em" > 32x32< / text > < / svg >
< div class = "pb-3 mb-0 small lh-sm border-bottom w-100" >
< div class = "d-flex justify-content-between" >
< strong class = "text-gray-dark" > Full Name< / strong >
< a href = "#" > Follow< / a >
< / div >
< span class = "d-block" > @username< / span >
< / div >
< / div >
< div class = "d-flex text-muted pt-3" >
< svg class = "bd-placeholder-img flex-shrink-0 me-2 rounded" width = "32" height = "32" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: 32x32" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#007bff" / > < text x = "50%" y = "50%" fill = "#007bff" dy = ".3em" > 32x32< / text > < / svg >
< div class = "pb-3 mb-0 small lh-sm border-bottom w-100" >
< div class = "d-flex justify-content-between" >
< strong class = "text-gray-dark" > Full Name< / strong >
< a href = "#" > Follow< / a >
< / div >
< span class = "d-block" > @username< / span >
< / div >
< / div >
< div class = "d-flex text-muted pt-3" >
< svg class = "bd-placeholder-img flex-shrink-0 me-2 rounded" width = "32" height = "32" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: 32x32" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#007bff" / > < text x = "50%" y = "50%" fill = "#007bff" dy = ".3em" > 32x32< / text > < / svg >
< div class = "pb-3 mb-0 small lh-sm border-bottom w-100" >
< div class = "d-flex justify-content-between" >
< strong class = "text-gray-dark" > Full Name< / strong >
< a href = "#" > Follow< / a >
< / div >
< span class = "d-block" > @username< / span >
< / div >
< / div >
< small class = "d-block text-end mt-3" >
< a href = "#" > All suggestions< / a >
< / small >
< / div >
< / main >
2022-11-22 09:51:50 +02:00
< script src = "/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin = "anonymous" > < / script >
2022-05-13 20:19:48 +03:00
< script src = "offcanvas.js" > < / script >
< / body >
< / html >
