Barra lateral

1,659 kevekıbhack

Abrir en el editor Publica tu código

Recomendado

30 January 2026

Ejemplo de barra de navegación adaptable con CSS puro

16 December 2025

Barra de navegación HTML con menú desplegable y estilo

17 December 2025

Barra de navegación de iconos inferior con Tailwind CSS

HTML

<!DOCTYPE html>

<head>

<title>CSS Sidebar</title>

<style>

/* Reset and base styles */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

}

body {

display: flex;

background-color: #f9fafb;

color: #111827;

}

/* Sidebar styles */

.sidebar {

width: 280px;

height: 100vh;

background-color: white;

border-right: 1px solid #e5e7eb;

padding: 24px;

position: fixed;

overflow-y: auto;

}

.logo {

display: flex;

align-items: center;

gap: 12px;

margin-bottom: 32px;

padding: 0 8px;

}

.logo-img {

width: 32px;

height: 32px;

background-color: #3b82f6;

border-radius: 8px;

}

.logo span {

font-size: 18px;

font-weight: 600;

}

.nav-list {

list-style: none;

display: flex;

flex-direction: column;

gap: 4px;

}

.nav-list li {

padding: 10px 12px;

border-radius: 6px;

display: flex;

align-items: center;

gap: 12px;

font-size: 15px;

font-weight: 500;

color: #4b5563;

cursor: pointer;

transition: all 0.2s ease;

position: relative;

}

.nav-list li:hover {

background-color: #f3f4f6;

color: #111827;

}

.nav-list li i {

width: 20px;

text-align: center;

color: #9ca3af;

}

.nav-list li:hover i {

color: #6b7280;

}

.badge {

background-color: #e5e7eb;

color: #4b5563;

font-size: 12px;

font-weight: 500;

padding: 2px 8px;

border-radius: 999px;

margin-left: auto;

}

/* Active state */

.nav-list li.active {

background-color: #f3f4f6;

color: #111827;

}

.nav-list li.active i {

color: #111827;

}

/* Main content styles */

.content {

flex: 1;

margin-left: 280px;

padding: 40px;

min-height: 100vh;

}

.content h1 {

font-size: 32px;

margin-bottom: 24px;

}

/* Mobile menu button */

.mobile-menu-button {

display: none;

position: fixed;

top: 20px;

left: 20px;

z-index: 101;

background: white;

border: none;

padding: 10px;

border-radius: 6px;

box-shadow: 0 2px 4px rgba(0,0,0,0.1);

cursor: pointer;

}

/* Responsive adjustments */

@media (max-width: 768px) {

.sidebar {

width: 240px;

padding: 16px;

}

.content {

margin-left: 240px;

padding: 24px;

}

@media (max-width: 576px) {

.sidebar {

transform: translateX(-100%);

transition: transform 0.3s ease;

z-index: 100;

}

.sidebar.open {

transform: translateX(0);

}

.content {

margin-left: 0;

padding: 24px;

padding-top: 70px;

}

.mobile-menu-button {

display: block;

}

</style>

</head>

<body>

</button>

<span>Untitled UI</span>

</div>

<li class="active"><i class="fas fa-home"></i> Dashboard</li>

<li><i class="fas fa-box"></i> Products</li>

<li><i class="fas fa-users"></i> Customers</li>

<li><i class="fas fa-envelope"></i> Messages</li>

<li>

<i class="fas fa-pen"></i> Drafts

</li>

<li>

<i class="fas fa-calendar-check"></i> Scheduled

</li>

<li>

<i class="fas fa-check-circle"></i> Published

</li>

<li><i class="fas fa-image"></i> Images</li>

<li><i class="fas fa-network-wired"></i> Network</li>

<li><i class="fas fa-warehouse"></i> Inventory</li>

<li><i class="fas fa-hashtag"></i> Hashtags</li>

<li><i class="fas fa-gift"></i> Rewards</li>

</ul>

</div>

<h1>Main Content</h1>

<p>Welcome to your dashboard. This is the main content area that will display different content based on your navigation selections.</p>

</div>

document.addEventListener('DOMContentLoaded', function() {

const menuButton = document.getElementById('menuButton');

const sidebar = document.getElementById('sidebar');

const navItems = document.querySelectorAll('.nav-list li');

// Mobile menu toggle

menuButton.addEventListener('click', function() {

sidebar.classList.toggle('open');

});

// Navigation item click handler

navItems.forEach(item => {

item.addEventListener('click', function() {

// Remove active class from all items

navItems.forEach(navItem => navItem.classList.remove('active'));

// Add active class to clicked item

this.classList.add('active');

// Close sidebar on mobile after selection

if (window.innerWidth <= 576) {

sidebar.classList.remove('open');

}

// Update content based on selection

const pageTitle = this.textContent.trim();

document.querySelector('.content h1').textContent = pageTitle;

document.querySelector('.content p').textContent = `This is the ${pageTitle} page content.`;

});

// Close sidebar when clicking outside on mobile

document.addEventListener('click', function(event) {

if (window.innerWidth <= 576 &&

!sidebar.contains(event.target) &&

event.target !== menuButton) {

sidebar.classList.remove('open');

}

});

</script>

</body>

</html>

CSS