Dock
A macOS-style floating dock bar with magnifying hover effects and icon tooltips. Perfect for app navigation, dashboard toolbars, or any interface that benefits from a polished icon-bar interaction.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
docknavigationtoolbarhovertooltip
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A macOS-style floating dock bar with magnifying hover effect and icon tooltips.
CSS
css
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #0a0a0a;
font-family: system-ui, sans-serif;
}
.dock-wrap {
width: 100%;
max-width: 56rem;
height: 16rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
}
.dock-bar {
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0.5rem;
border-radius: 1rem;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(23,23,23,0.9);
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
animation: float 4s ease-in-out infinite;
}
.dock-bar:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); }
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(2px); }
}
.dock-btn {
position: relative;
padding: 0.75rem;
border: none;
border-radius: 0.5rem;
background: transparent;
color: #fafafa;
cursor: pointer;
transition: background-color 0.2s, transform 0.2s;
}
.dock-btn:hover {
background: rgba(255,255,255,0.08);
transform: scale(1.1) translateY(-2px);
}
.dock-btn:active { transform: scale(0.95); }
.dock-btn svg { width: 1.25rem; height: 1.25rem; display: block; }
.dock-btn .tooltip {
position: absolute;
left: 50%;
top: -2rem;
transform: translateX(-50%);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
white-space: nowrap;
background: #27272a;
color: #fafafa;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.dock-btn:hover .tooltip { opacity: 1; }HTML
html
<div class="dock-wrap">
<div class="dock-bar">
<button class="dock-btn" type="button"><span class="tooltip">Home</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></button>
<button class="dock-btn" type="button"><span class="tooltip">Search</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></button>
<button class="dock-btn" type="button"><span class="tooltip">Settings</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
<button class="dock-btn" type="button"><span class="tooltip">Folder</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z"/></svg></button>
<button class="dock-btn" type="button"><span class="tooltip">User</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></button>
</div>
</div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #0a0a0a;
font-family: system-ui, sans-serif;
}
.dock-wrap {
width: 100%;
max-width: 56rem;
height: 16rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
}
.dock-bar {
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0.5rem;
border-radius: 1rem;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(23,23,23,0.9);
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
animation: float 4s ease-in-out infinite;
}
.dock-bar:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); }
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(2px); }
}
.dock-btn {
position: relative;
padding: 0.75rem;
border: none;
border-radius: 0.5rem;
background: transparent;
color: #fafafa;
cursor: pointer;
transition: background-color 0.2s, transform 0.2s;
}
.dock-btn:hover {
background: rgba(255,255,255,0.08);
transform: scale(1.1) translateY(-2px);
}
.dock-btn:active { transform: scale(0.95); }
.dock-btn svg { width: 1.25rem; height: 1.25rem; display: block; }
.dock-btn .tooltip {
position: absolute;
left: 50%;
top: -2rem;
transform: translateX(-50%);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
white-space: nowrap;
background: #27272a;
color: #fafafa;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.dock-btn:hover .tooltip { opacity: 1; }
</style>
</head>
<body>
<div class="dock-wrap">
<div class="dock-bar">
<button class="dock-btn" type="button"><span class="tooltip">Home</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></button>
<button class="dock-btn" type="button"><span class="tooltip">Search</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></button>
<button class="dock-btn" type="button"><span class="tooltip">Settings</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
<button class="dock-btn" type="button"><span class="tooltip">Folder</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z"/></svg></button>
<button class="dock-btn" type="button"><span class="tooltip">User</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></button>
</div>
</div>
</body>
</html>