Breaking News: Grepper is joining You.com. Read the official announcement!

Side Nav Bar

Add Answer

PrashantUnity answered on June 6, 2022 Popularity 10/10 Helpfulness 2/10

answer Side Nav Bar

related sidebar menu css

related left-side nav bar

related how to make a side navigation bar in html

Side Nav Bar

Comment

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>
    </div>
  </div>
</div>

Popularity 10/10 Helpfulness 2/10 Language html

Source: getbootstrap.com

Tags: html nav

Link to this answer
Share Copy Link

Contributed on Dec 16 2022

PrashantUnity

0 Answers Avg Quality 2/10

Closely Related Answers

sidebar menu css

Comment

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="sidebar">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="content">
    <!-- Your main content goes here -->
  </div>
</body>
</html>

Popularity 10/10 Helpfulness 2/10 Language html

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Jul 11 2023

Sivasubramaniyam V

0 Answers Avg Quality 2/10

left-side nav bar

Comment

body {
    margin: 0;
    padding: 0;
    font-size: 100%;
}
.left {
    width: 20%;
    float: left;
}
.nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav li {    
    margin: 1px 0;
    border: 1px solid #999;
}
.nav li a {
    display: block;
    line-height: 3em;
    width: 100%;
    text-decoration: none;
}

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: www.codecademy.com

Tags: nav

Link to this answer
Share Copy Link

Contributed on Aug 06 2022

Hungry Horse

0 Answers Avg Quality 2/10

how to make a side navigation bar in html

Comment

-1

<div id="side-nav" style="width:100px(you can change this however you like);
height:100vh(if this doesn't work try 100%, anything that will get this to full height);
float:right/left; position:sticky;">
  <ul>
    <li>...</li>
    ...
  </ul>
</div>

Popularity 10/10 Helpfulness 2/10 Language html

Source: Grepper

Tags: html

Link to this answer
Share Copy Link

Contributed on Jun 06 2022

Oh! So We Are Using Our Made-Up Names!

0 Answers Avg Quality 2/10

Side Nav Bar

Contents

More Related Answers

Side Nav Bar

Closely Related Answers

sidebar menu css

left-side nav bar

how to make a side navigation bar in html

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.