Dock Navbar Using HTML and CSS

This HTML and CSS code snippet helps you to create a dock navbar on the webpage. The navbar sticks to the screen’s edge and contains links to different sections of a webpage. Each link is represented by an icon, and clicking on these icons takes you to the respective sections.

The code uses CSS for styling, including gradients and hover effects to enhance the visual appeal of the navbar. Overall, it’s helpful for creating a visually appealing and functional navigation system for a webpage without using JavaScript.

How to Create Dock Navbar Using HTML and CSS

1. Start by setting up the HTML structure. This code defines the different sections of the webpage and includes navigation links within a <nav> element. Modify the content within each section to suit your webpage.

<h2> This Page Demonstrates Dock Navbar </h2>
<article id="home" class="ui-page">
  <h1>Home</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
</article>
<article id="search" class="ui-page">
  <h2>Search</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
</article>
<article id="following" class="ui-page">
  <h2>Follows</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
</article>
<article id="settings" class="ui-page">
  <h2>Settings</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
</article>
<nav class="ui-dock">
  <a href="#home">
    <svg viewBox="0 0 24 24">
      <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path>
    </svg>
  </a>
  <a href="#search">
    <svg viewBox="0 0 24 24">
      <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
      <path d="M21 21l-6 -6"></path>
    </svg>
  </a>
  <a href="#following">
    <svg viewBox="0 0 24 24">
      <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
      <path d="M16 19h6"></path>
      <path d="M19 16v6"></path>
      <path d="M6 21v-2a4 4 0 0 1 4 -4h4"></path>
    </svg>
  </a>
  <a href="#settings">
    <svg viewBox="0 0 24 24">
      <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"></path>
      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
    </svg>
  </a>
</nav>

2. Now, add the following CSS code to your project. It styles the sections, and navigation links, and creates the docking effect for the navbar. Customize each section’s appearance and content as desired.

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jost/v15/92zPtBhPNqw79Ij1E865zBUv7mx9IgVG.ttf) format('truetype');
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  display: grid;
  height: 100vh;
}
body {
  --gap: 1em;
  background-image: linear-gradient(117deg, #faa700, #00d4fa) !important;
  font-family: ui-sans-serif, system-ui;
  margin: 0;
  display: grid;
}
.ui-page {
  background-repeat: no-repeat;
  background-size: cover;
  display: none;
  font-size: clamp(1.0625rem, 1.4553rem, 1.3125rem);
  grid-area: -1;
  padding: 2ch;
}
.ui-page:target {
  display: block;
}
.ui-page :is(h1, h2) {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.33), #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Jost', sans-serif;
  font-size: clamp(4rem, 7.5358rem, 6.25rem);
  font-weight: 600;
  margin: 0;
  text-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}
#home {
  background-image: linear-gradient(117deg, hsl(191, 44%, 60%), hsla(191, 100%, 60%, 0.5));
}
#home:target ~ .ui-dock a[href="#home"]::after {
  background: #000;
}
#following {
  background-image: linear-gradient(117deg, hsl(39, 90%, 60%), hsla(39, 100%, 60%, 0.5));
}
#following:target ~ .ui-dock a[href="#following"]::after {
  background: #000;
}
#search {
  background-image: linear-gradient(117deg, hsl(161, 40%, 57%), hsla(161, 100%, 60%, 0.5));
}
#search:target ~ .ui-dock a[href="#search"]::after {
  background: #000;
}
#settings {
  background-image: linear-gradient(117deg, hsl(21, 78%, 59%), hsla(21, 100%, 59%, 0.5));
}
#settings:target ~ .ui-dock a[href="#settings"]::after {
  background: #000;
}
.ui-dock {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.45);
  border-radius: 1.75em;
  bottom: var(--gap);
  box-shadow: 0 0 20px -5px rgba(0, 0, 0, 0.3), 0 0 12px -7px rgba(0, 0, 0, 0.2);
  display: grid;
  gap: var(--gap);
  grid-auto-flow: column;
  left: 50%;
  padding: var(--gap);
  place-content: center;
  place-self: center;
  position: fixed;
  translate: -50% 0;
}
.ui-dock a {
  border-radius: 1em;
  height: 4em;
  padding: 0.5em;
  position: relative;
  width: 4em;
}
.ui-dock a::after {
  border-radius: 50%;
  bottom: -0.5em;
  content: '';
  display: block;
  height: 0.25em;
  left: 50%;
  margin: auto;
  position: absolute;
  translate: -50% 0;
  width: 0.25em;
}
.ui-dock a:hover {
  box-shadow: 0 0 10px -2.5px rgba(0, 0, 0, 0.3), 0 0 6px -3px rgba(0, 0, 0, 0.2);
}
.ui-dock a svg {
  stroke-width: 1;
  stroke: #FFF;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[href="#home"] {
  background-color: #6CB5C6;
}
[href="#search"] {
  background-color: #65BDA1;
}
[href="#following"] {
  background-color: #F5B53F;
}
[href="#settings"] {
  background-color: #E87D44;
}

If you wish to personalize the colors of your navbar, you can modify the background colors in the CSS code. Look for the sections marked with [href="#section"] and adjust the background colors according to your preferences. This step allows you to match the navbar colors with your overall webpage theme.

That’s all! hopefully, you have successfully created Dock Navbar Using HTML and CSS. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.