Foundation Sidebar
Sidebars are common navigation and content display areas on websites. This chapter will introduce how to create various sidebars using Foundation.
Basic Sidebar
Use the grid system to create sidebar layouts:
html
<div class="grid-x">
<div class="cell medium-3">
<!-- Sidebar -->
<aside>
<ul class="vertical menu">
<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>
</aside>
</div>
<div class="cell medium-9">
<!-- Main Content -->
<main>
<h1>Main Content Area</h1>
<p>This is the main content of the page.</p>
</main>
</div>
</div>Sticky Sidebar
Use the Sticky plugin to create a fixed sidebar:
html
<div class="grid-x">
<div class="cell medium-3">
<div data-sticky-container>
<div class="sticky" data-sticky data-margin-top="0">
<ul class="vertical menu">
<li><a href="#">Fixed Menu 1</a></li>
<li><a href="#">Fixed Menu 2</a></li>
<li><a href="#">Fixed Menu 3</a></li>
</ul>
</div>
</div>
</div>
<div class="cell medium-9">
<main>
<p>The sidebar stays fixed when scrolling the page.</p>
<!-- More content -->
</main>
</div>
</div>Sidebar with Headers
html
<aside class="sidebar">
<h4>Navigation Menu</h4>
<ul class="vertical menu">
<li class="is-active"><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
</ul>
<h4>Categories</h4>
<ul class="vertical menu">
<li><a href="#">Tech Articles <span class="badge">12</span></a></li>
<li><a href="#">Design Tutorials <span class="badge">8</span></a></li>
<li><a href="#">Product Reviews <span class="badge">5</span></a></li>
</ul>
</aside>Sidebar with Icons
html
<aside class="sidebar">
<ul class="vertical menu">
<li><a href="#"><i class="fi-home"></i> Home</a></li>
<li><a href="#"><i class="fi-graph-bar"></i> Dashboard</a></li>
<li><a href="#"><i class="fi-torso-business"></i> User Management</a></li>
<li><a href="#"><i class="fi-page-multiple"></i> Article Management</a></li>
<li><a href="#"><i class="fi-widget"></i> Settings</a></li>
</ul>
</aside>Nested Menu Sidebar
html
<aside class="sidebar">
<ul class="vertical menu" data-accordion-menu>
<li>
<a href="#">Product Management</a>
<ul class="menu vertical nested">
<li><a href="#">Product List</a></li>
<li><a href="#">Add Product</a></li>
<li><a href="#">Categories</a></li>
</ul>
</li>
<li>
<a href="#">Order Management</a>
<ul class="menu vertical nested">
<li><a href="#">All Orders</a></li>
<li><a href="#">Pending</a></li>
<li><a href="#">Completed</a></li>
</ul>
</li>
<li><a href="#">User Management</a></li>
<li><a href="#">Settings</a></li>
</ul>
</aside>Blog Sidebar
html
<aside class="sidebar">
<!-- Search Box -->
<div class="card">
<div class="card-section">
<h5>Search</h5>
<div class="input-group">
<input class="input-group-field" type="search" placeholder="Search articles...">
<div class="input-group-button">
<button class="button"><i class="fi-magnifying-glass"></i></button>
</div>
</div>
</div>
</div>
<!-- Categories -->
<div class="card">
<div class="card-divider">
<h5>Categories</h5>
</div>
<div class="card-section">
<ul class="no-bullet">
<li><a href="#">Tech (15)</a></li>
<li><a href="#">Design (8)</a></li>
<li><a href="#">Lifestyle (12)</a></li>
<li><a href="#">Travel (6)</a></li>
</ul>
</div>
</div>
<!-- Popular Articles -->
<div class="card">
<div class="card-divider">
<h5>Popular Articles</h5>
</div>
<div class="card-section">
<ul class="no-bullet">
<li style="margin-bottom: 10px;">
<a href="#">How to Build Responsive Websites with Foundation</a>
<small class="text-muted">2024-01-15</small>
</li>
<li style="margin-bottom: 10px;">
<a href="#">Complete Guide to CSS Grid</a>
<small class="text-muted">2024-01-10</small>
</li>
<li>
<a href="#">JavaScript Performance Optimization Tips</a>
<small class="text-muted">2024-01-05</small>
</li>
</ul>
</div>
</div>
<!-- Tag Cloud -->
<div class="card">
<div class="card-divider">
<h5>Tags</h5>
</div>
<div class="card-section">
<span class="label">HTML</span>
<span class="label">CSS</span>
<span class="label">JavaScript</span>
<span class="label">Foundation</span>
<span class="label">Responsive</span>
<span class="label">Frontend</span>
</div>
</div>
</aside>Admin Dashboard Sidebar
html
<style>
.admin-sidebar {
background: #2c3e50;
min-height: 100vh;
padding: 20px 0;
}
.admin-sidebar .logo {
color: white;
text-align: center;
padding: 20px;
border-bottom: 1px solid rgba(255,255,255,0.1);
margin-bottom: 20px;
}
.admin-sidebar .menu a {
color: #bdc3c7;
padding: 12px 20px;
}
.admin-sidebar .menu a:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
.admin-sidebar .menu li.is-active > a {
background: #1779ba;
color: #fff;
}
.admin-sidebar .menu a i {
margin-right: 10px;
width: 20px;
text-align: center;
}
.admin-sidebar .menu-heading {
color: #7f8c8d;
font-size: 0.75rem;
text-transform: uppercase;
padding: 15px 20px 5px;
}
</style>
<aside class="admin-sidebar">
<div class="logo">
<h4>Admin Dashboard</h4>
</div>
<p class="menu-heading">Main Menu</p>
<ul class="vertical menu">
<li class="is-active"><a href="#"><i class="fi-home"></i> Dashboard</a></li>
<li><a href="#"><i class="fi-torso-business"></i> Users</a></li>
<li><a href="#"><i class="fi-page-multiple"></i> Content</a></li>
<li><a href="#"><i class="fi-shopping-cart"></i> Orders</a></li>
</ul>
<p class="menu-heading">System</p>
<ul class="vertical menu">
<li><a href="#"><i class="fi-widget"></i> Settings</a></li>
<li><a href="#"><i class="fi-shield"></i> Security</a></li>
<li><a href="#"><i class="fi-power"></i> Logout</a></li>
</ul>
</aside>Complete Example
html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation Sidebar Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
<style>
.sidebar {
padding: 20px;
background: #f8f8f8;
border-radius: 4px;
}
.sidebar h5 {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}
.sidebar .menu a i {
margin-right: 10px;
}
.sidebar .card {
margin-bottom: 15px;
}
.main-content {
padding: 20px;
}
.tag-cloud .label {
margin: 2px;
display: inline-block;
}
</style>
</head>
<body>
<div class="grid-container">
<h1 style="margin: 20px 0;">Foundation Sidebar Showcase</h1>
<div class="grid-x grid-margin-x">
<!-- Sidebar -->
<div class="cell medium-3">
<aside class="sidebar">
<!-- Navigation Menu -->
<h5>Navigation</h5>
<ul class="vertical menu">
<li class="is-active"><a href="#"><i class="fi-home"></i> Home</a></li>
<li><a href="#"><i class="fi-page"></i> Articles</a></li>
<li><a href="#"><i class="fi-photo"></i> Gallery</a></li>
<li><a href="#"><i class="fi-torso"></i> About</a></li>
<li><a href="#"><i class="fi-mail"></i> Contact</a></li>
</ul>
<!-- Search -->
<div class="card">
<div class="card-section">
<h5>Search</h5>
<div class="input-group">
<input class="input-group-field" type="search" placeholder="Search...">
<div class="input-group-button">
<button class="button"><i class="fi-magnifying-glass"></i></button>
</div>
</div>
</div>
</div>
<!-- Categories -->
<div class="card">
<div class="card-divider">
<h5 style="margin: 0;">Categories</h5>
</div>
<div class="card-section">
<ul class="no-bullet" style="margin: 0;">
<li><a href="#">Tech Articles <span class="badge primary">15</span></a></li>
<li><a href="#">Design Tutorials <span class="badge primary">8</span></a></li>
<li><a href="#">Product Reviews <span class="badge primary">12</span></a></li>
<li><a href="#">Lifestyle <span class="badge primary">6</span></a></li>
</ul>
</div>
</div>
<!-- Popular Articles -->
<div class="card">
<div class="card-divider">
<h5 style="margin: 0;">Popular Articles</h5>
</div>
<div class="card-section">
<ul class="no-bullet" style="margin: 0;">
<li style="margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee;">
<a href="#">How to Build Websites with Foundation</a>
<br><small class="text-muted">2024-01-15</small>
</li>
<li style="margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee;">
<a href="#">Responsive Design Best Practices</a>
<br><small class="text-muted">2024-01-10</small>
</li>
<li>
<a href="#">Complete Guide to CSS Grid</a>
<br><small class="text-muted">2024-01-05</small>
</li>
</ul>
</div>
</div>
<!-- Tag Cloud -->
<div class="card">
<div class="card-divider">
<h5 style="margin: 0;">Tags</h5>
</div>
<div class="card-section tag-cloud">
<span class="label">HTML</span>
<span class="label">CSS</span>
<span class="label">JavaScript</span>
<span class="label">Foundation</span>
<span class="label">Responsive</span>
<span class="label">Frontend</span>
<span class="label">Web Design</span>
</div>
</div>
<!-- Follow Us -->
<div class="card">
<div class="card-divider">
<h5 style="margin: 0;">Follow Us</h5>
</div>
<div class="card-section text-center">
<a href="#" class="button hollow small"><i class="fi-social-twitter"></i></a>
<a href="#" class="button hollow small"><i class="fi-social-facebook"></i></a>
<a href="#" class="button hollow small"><i class="fi-social-github"></i></a>
</div>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="cell medium-9">
<main class="main-content">
<h2>Main Content Area</h2>
<p>This is the main content area of the page. The sidebar displays navigation and other auxiliary information on the left.</p>
<div class="card">
<div class="card-divider">
<h4>Article Title</h4>
</div>
<div class="card-section">
<p>This is the content of a sample article. Foundation provides a powerful grid system that makes it easy to create various layouts.</p>
<p>Sidebars are typically used to display navigation menus, search boxes, categories, tags, popular articles, and other auxiliary content.</p>
</div>
</div>
<div class="card">
<div class="card-divider">
<h4>Another Article</h4>
</div>
<div class="card-section">
<p>You can customize the sidebar content and style as needed.</p>
</div>
</div>
</main>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>Sidebar Best Practices
- Responsive Design: Consider hiding or collapsing sidebars on small screens
- Content Priority: Place the most important content at the top of the sidebar
- Visual Separation: Use background colors or borders to distinguish sidebar from main content
- Fixed Position: Consider using sticky positioning to keep the sidebar always visible
- Clean Design: Avoid placing too much content in the sidebar
Summary
In this chapter, we learned:
- Basic sidebar layouts
- Sticky sidebars
- Sidebars with icons and nested menus
- Blog sidebar design
- Admin dashboard sidebar
Next chapter, we will learn Foundation Off-Canvas.