Example code for building an admin dashboard layout using CSS and JavaScript

What you will create

In this new tutorial, we'll use CSS and JavaScript to create a responsive admin dashboard layout. To build it, we’ll borrow some ideas from the WordPress dashboard, such as its collapsible sidebar menu.

Throughout the tutorial we will face many challenges, but these challenges will provide us with good practice tips to improve our front-end skills.

Without further ado, let’s take a look at the final admin dashboard demo (click the “ Collapse” button at the bottom of the sidebar to see the collapsible navigation feature, and view the fullscreen version to play with its responsiveness):

1. Start with page markup

To start our markup, we need an SVG, a title, and a section:

<svg style="display:none;">...</svg>
<header class="page-header">...</header>
<section class="page-content">...</section>

SVG sprites

As you might imagine, in any management console we need a bunch of icons. Thankfully, Envato Elements offers a growing collection of useful vector icons, so let's take advantage of that library and download these Trade and Dashboard Icons.

Rather than including them directly in the page via img or svg tags, let’s go a step further and create SVG sprites. To do this, we wrap all icons in an SVG container. This container should be hidden, so we'll apply display: none to it. If we don't hide it, there will be a large empty space at the top of the page.

Each icon will be placed inside a symbol element with a unique ID and viewBox attribute that depends on the size of the icon. We can then render the target icon whenever we need it by calling the use element (which I’ll show you in a moment).

Now, let's get familiar with the markup required for an SVG sprite:

<svg style="display:none;">
  <symbol id="down" viewBox="0 0 16 16">
    <polygon points="3.81 4.38 8 8.57 12.19 4.38 13.71 5.91 8 11.62 2.29 5.91 3.81 4.38" />
  </symbol>
  <symbol id="users" viewBox="0 0 16 16">
    <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,15a7,7,0,0,1-5.19-2.32,2.71,2.71,0,0,1,1.7-1,13.11,13.11,0,0,0,1.29-.28,2.32,2.32,0,0,0,.94-.34,1.17,1.17,0,0,0-.27-.7h0A3.61,3.61,0,0,1,5.15,7.49,3.18,3.18,0,0,1,8,4.07a3.18,3.18,0,0,1,2.86,3.42,3.6,3.6,0,0,1-1.32,2.88h0a1.13,1.13,0,0,0-.27.69,2.68,2.68,0,0,0,.93.31,10.81,10.81,0,0,0,1.28.23,2.63,2.63,0,0,1,1.78,1A7,7,0,0,1,8,15Z" /> 
  </symbol>
  
  <!-- more symbols here -->
</svg>

In fact, this is all we need to create a built-in SVG sprite.

Header

Continuing with our admin dashboard layout, let’s take a look at the page header.

Inside it, we’ll define a nav element that will act as a wrapper for the following elements:

• Logo
• Collapse button, will toggle menu on mobile screens
• The menu itself will contain the menu link, two headings, and the collapse/expand buttons. Semantically it's probably more correct to have two separate menus and put the title outside of them, but you can do it a different way if you prefer.

This is what it looks like on a widescreen (>767px):

Header structure:

<header class="page-header">
  <nav>
    <a href="#0">
      <img class="logo" src="logo.svg" alt="forecastr logo">
    </a>
    <button class="toggle-mob-menu" aria-expanded="false" aria-label="open menu">
      <svg width="20" height="20" aria-hidden="true">
        <use xlink:href="#down"></use>
      </svg>
    </button>
    <ul class="admin-menu">
      <li class="menu-heading">
        <h3>Admin</h3>
      </li>
      <li>
        <a href="#0">
          <svg>
            <use xlink:href="#pages"></use>
          </svg>
          <span>Pages</span>
        </a>
      </li>
      
      <!-- more list items here -->
      
      <li>
        <button class="collapse-btn" aria-expanded="true" aria-label="collapse menu">
          <svg aria-hidden="true">
            <use xlink:href="#collapse"></use>
          </svg>
          <span>Collapse</span>
        </button>
      </li>
    </ul>
  </nav>
</header>

Note two things in the code above:

• How do we reference the target icon using the use element?
• The ARIA attributes ( aria-expanded , aria-label , aria-hidden ) we added to the toggle button. These properties will help us make our components more accessible. Later, we'll discuss how to update the value of a button based on its state.

part

This section will contain two nested sections.

Section 1

Inside the first section, we will place the search form and some information about the currently logged in user (name, avatar, and notifications).

This is how it looks on a widescreen (>767px):

Partial structure:

<section class="search-and-user">
  <form>
    <input type="search" placeholder="Search Pages...">
    <button type="submit" aria-label="submit form">
      <svg aria-hidden="true">
        <use xlink:href="#search"></use>
      </svg>
    </button>
  </form>
  <div class="admin-profile">
    <span class="greeting">...</span>
    <div class="notifications">
      <span class="badge">...</span>
      <svg>
        <use xlink:href="#users"></use>
      </svg>
    </div>
  </div>
</section>

Again, notice that we added some ARIA attributes to the submit button.

Section 2

In the second part, just to fill the demo with some dummy content, we're going to put a bunch of article placeholders in there. These might typically contain tabular data, graphs, or some form of feed.

“Use a maximum of 5–7 different widgets to create a view. Otherwise, it will be difficult for users to focus and get a clear overview.” – Taras Bakusevych

This is how it looks on a widescreen (>767px):

Based on UX best practices, you may not need so many sections

Partial structure:

<section class="page-content">
  <section class="grid">
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </section>
</section>

2. Define some basic styles

With our admin console markup ready, we'll move on to the CSS. As always, the first step is to specify some CSS variables and common reset styles:

:root {
  --page-header-bgColor: #242e42;
  --page-header-bgColor-hover: #1d2636;
  --page-header-txtColor: #dde9f8;
  --page-header-headingColor: #7889a4;
  --page-header-width: 220px;
  --page-content-bgColor: #f0f1f6;
  --page-content-txtColor: #171616;
  --page-content-blockColor: #fff;
  --white: #fff;
  --black: #333;
  --blue: #00b9eb;
  --red: #ec1848;
  --border-radius: 4px;
  --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.075);
}
 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
 
ul {
  list-style: none;
}
 
a,
button {
  color: inherit;
}
 
a {
  text-decoration: none;
}
 
button {
  background: none;
  cursor: pointer;
}
 
input {
  -webkit-appearance: none;
}
 
button,
input {
  border: none;
}
 
svg {
  display: block;
}
 
body {
  font: 16px/1.5 "Lato", sans-serif;
}

NOTE : For the sake of simplicity, I will not be stepping through all the CSS rules in this tutorial. There are nearly 400 lines of CSS here. If you want, you can select them all by clicking on the demo project's CSS tab.

3. Define the main dashboard style

At this point, we are ready to focus on page styling.

Set Title

The header will be a fixed position element. Its width will be 220px and its height equal to the viewport height. If its contents exceed the viewport height, a vertical scrollbar will be displayed.

The nav element will behave as a flex container with a height of at least 100%. Remember, its direct children are three:

Logo mobile menu toggle button, and menu.

The toggle button is only visible on small screens (<768px). This is the style we need:

/*CUSTOM VARIABLES HERE*/
 
.page-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow:auto;
  padding-top: 20px;
  width: var(--page-header-width);
  color: var(--page-header-txtColor);
  background: var(--page-header-bgColor);
}
 
.page-header nav {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
 
.page-header .toggle-mob-menu {
  display: none;
}

Tip: If you want an absolutely positioned header that covers the entire height of the page, add the following style:

body {
  position: relative;
}
 
.page-header {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  
  /*Comment these styles*/
  /*position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;*/
}

Menu Style

The menu will act as a flex container, and we’ll assign it flex: 1 so that it expands and covers the entire parent height.

The last menu item will be set to margin-top: auto because it should be at the very bottom of the menu. This behavior will be clearer when the header scrollbar does not appear. To test it, try removing some menu items, or view the demo on a tall screen.

The links and buttons in the menu will also act as flex containers and their contents (text and icons) should be aligned vertically.

Menu titles are smaller compared to other menu elements. Additionally, we will increase the spacing between its characters.

This is part of the menu style:

/*CUSTOM VARIABLES HERE*/
 
.page-header .admin-menu {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-top: 35px;
}
 
.page-header .admin-menu li:last-child {
  margin-top: auto;
  margin-bottom: 20px;
}
 
.page-header .admin-menu li > * {
  width: 100%;
  padding: 12px 15px;
}
 
.page-header .admin-menu a,
.page-header .admin-menu button {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s;
}
 
.page-header .admin-menu .menu-heading h3 {
  text-transform:uppercase;
  letter-spacing: 0.15em;
  font-size: 12px;
  margin-top: 12px;
  color: var(--page-header-headingColor);
}

Page content style

Remember that .page-content section contains two subsections.

This section will be placed 220px from the left side of the viewport. Additionally, we set its width: calc(100% - 220px) . Note that its left attribute value is equal to the title width.

Its style:

/*CUSTOM VARIABLES HERE*/
 
.page-content {
  position: relative;
  left: var(--page-header-width);
  width: calc(100% - var(--page-header-width));
  min-height: 100vh;
  padding: 30px;
  color: var(--page-content-txtColor);
  background: var(--page-content-bgColor);
}

Search and User Styles

Also, remember that .search-and-user section contains two elements: the search form and .admin-profile .

For the layout, we will use CSS Grid. The search form will take up all of the available space and will have a 50px margin between it and its siblings. The two brothers will be aligned vertically.

The submit button inside the form will be absolutely positioned. It will only contain a decorative icon, so we need an ARIA attribute to allow screen readers to interpret it and make it accessible.

.admin-profile containing both elements will act as a flex container with vertically centered content. The badge (counter) element will be absolutely positioned inside its parent with the content centered horizontally and vertically.

Here is part of the style needed for this section:

/*CUSTOM VARIABLES HERE*/
 
.search-and-user {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 50px;
  align-items: center;
  background: var(--page-content-bgColor);
  margin-bottom: 30px;
}
 
.search-and-user form {
  position: relative;
}
 
.search-and-user form button {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}
 
.search-and-user .admin-profile {
  display: flex;
  align-items: center;
}
 
.search-and-user .admin-profile .notifications {
  position: relative;
}
 
.search-and-user .admin-profile .badge {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -10px;
  right: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  color: var(--white);
  background: var(--red);
}

Grid Style

To lay out the articles on our admin dashboard, we’ll make use of CSS Grid. We will give all articles a fixed height of 300px. Except for the first and last articles which will span the entire parent width, all other articles will be part of the two-column layout.

Associated styles:

/*CUSTOM VARIABLES HERE*/
 
.page-content .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 30px;
}
 
.page-content .grid > article {
  display: flex;
  height: 300px;
  background: var(--page-content-blockColor);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}
 
.page-content .grid > article:first-child,
.page-content .grid > article:last-child {
  grid-column: 1 / -1;
}

4. Switch title

Every time we click the collapse/expand button, the header state will change. If expanded, it will collapse (leaving only the icon variant of the menu item) and vice versa.

Keep in mind that this feature is only available on screens larger than 767px. For smaller screens the header will have a different layout, which we'll cover later.

When the header is in the collapsed state, the body receives collapsed class. By then, the following had happened:

• Title shrinks. Its width changes from 220px to 40px.
• In response to this, .page-content section grows. Specifically, its width changes from width: calc(100% - 220px) to width: calc(100% - 40px) . In addition, its left attribute value becomes 40px instead of 220px.
• The logo, menu title, menu link text, and menu button text disappear.
• aria-expanded and aria-label attribute values ​​of the toggle button are updated. Also, its icon is rotated 180 degrees so it looks like an expand icon.

Here is the JavaScript code that implements this functionality:

const body = document.body;
const collapseBtn = document.querySelector(".admin-menu button");
const collapsedClass = "collapsed";
 
collapseBtn.addEventListener("click", function() {
  this.getAttribute("aria-expanded") == "true"
    ? this.setAttribute("aria-expanded", "false")
    : this.setAttribute("aria-expanded", "true");
  this.getAttribute("aria-label") == "collapse menu"
    ? this.setAttribute("aria-label", "expand menu")
    : this.setAttribute("aria-label", "collapse menu");
  body.classList.toggle(collapsedClass);
});

And all related styles:

/*CUSTOM VARIABLES HERE*/
 
@media screen and (min-width: 768px) {
  .collapsed .page-header {
    width: 40px;
  }
 
  .collapsed .page-header .admin-menu li > * {
    padding: 10px;
  }
 
  .collapsed .page-header .logo,
  .collapsed .page-header .admin-menu span,
  .collapsed .page-header .admin-menu .menu-heading {
    display: none;
  }
 
  .collapsed .page-header .admin-menu svg {
    margin-right: 0;
  }
 
  .collapsed .page-header .collapse-btn svg {
    transform: rotate(180deg);
  }
 
  .collapsed .page-content {
    left: 40px;
    width: calc(100% - 40px);
  }
}

5. Show tooltips on admin menu items

Now, let's go a step further and add another new feature to the collapsible header.

As mentioned in the previous section, when the header is collapsed, the text of the menu link disappears. This means that at that point, only the SVG icon will be visible. So let's display a tooltip that gives users a better idea of ​​what each link does.

To do this, every time the menu link (icon) is hovered over, we will add title attribute to it, with a value of plain text. But again, this should only happen when the header is collapsed and the window width is at least 768px.

Here is the corresponding JavaScript:

const body = document.body;
const menuLinks = document.querySelectorAll(".admin-menu a");
const collapsedClass = "collapsed";
 
for (const link of menuLinks) {
  link.addEventListener("mouseenter", function() {
    body.classList.contains(collapsedClass) &&
    window.matchMedia("(min-width: 768px)").matches
      ? this.setAttribute("title", this.textContent)
      : this.removeAttribute("title");
  });
}

6. Be Responsive

On a screen as wide as 767 pixels, our page looks like this:

This is quite different from our sidebar arrangement, right? Let's highlight the most important differences compared to the desktop version:

• Both the header and .page-content have position: static , width: 100% .
• nav element's expansion direction changes from column to row .
• The mobile menu toggle button becomes visible.
• The menu is absolutely positioned below the header and is initially hidden. Every time we click on the toggle button, it becomes visible.
• The collapse/expand buttons and the .greeting element are hidden.
• .search-and-user section is absolutely positioned next to the mobile menu toggle button.

Below you can see part of the responsive style:

@media screen and (max-width: 767px) {
  .page-header,
  .page-content {
    position: static;
    width: 100%;
  }
 
  .page-header nav {
    flex-direction: row;
  }
 
  .page-header .toggle-mob-menu {
    display: block;
  }
 
  .page-header .admin-menu {
    position: absolute;
    left: 98px;
    top: 57px;
    margin-top: 0;
    z-index: 2;
    border-radius: var(--border-radius);
    background: var(--page-header-bgColor);
    visibility: hidden;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.2s;
  }
  
  .page-header .admin-menu li:last-child,
  .search-and-user .admin-profile .greeting {
    display: none;
  }
 
  .search-and-user {
    position: absolute;
    left: 131px;
    top: 10px;
    padding: 0;
    grid-column-gap: 5px;
    width: calc(100% - 141px);
    border-radius: var(--border-radius);
    background: transparent;
  }
}

7. Switch to mobile menu

Each time you click the toggle button, the menu state changes. If it expands, it collapses, and vice versa.

In the expanded state of the menu, the body will receive mob-menu-opened class. By then, the following had happened:

• A menu appears.
• aria-expanded and aria-label attribute values ​​of the toggle button are updated. Also, its icon is rotated 180 degrees so it looks like an expand icon.

This is the required JavaScript code:

const body = document.body;
const toggleMobileMenu = document.querySelector(".toggle-mob-menu");
 
toggleMobileMenu.addEventListener("click", function() {
  this.getAttribute("aria-expanded") == "true"
    ? this.setAttribute("aria-expanded", "false")
    : this.setAttribute("aria-expanded", "true");
  this.getAttribute("aria-label") == "open menu"
    ? this.setAttribute("aria-label", "close menu")
    : this.setAttribute("aria-label", "open menu");
  body.classList.toggle("mob-menu-opened");
});

And the relevant CSS:

.page-header .toggle-mob-menu svg {
  transition: transform 0.2s;
}
 
.page-header .admin-menu {
  transition: all 0.2s;
}
 
.mob-menu-opened .toggle-mob-menu svg {
  transform: rotate(180deg);
}
 
.mob-menu-opened .page-header .admin-menu {
  transform: scale(1);
  visibility: visible;
  opacity: 1;
}

in conclusion

That's it! We successfully built a fully functional admin dashboard layout. You will be able to expand on this to create a variety of management interfaces. I hope you enjoy this trip as much as I do!

One last point. I'm certainly no accessibility expert, but I tried to make this component more accessible by adding some common ARIA attributes. During this process, I checked out the WordPress and Codepen dashboards for reference. There may be other ARIA attributes included in the code. For example, I excluded the aria-controls attribute which is responsible for identifying related content, but this is because Aria-Controls is Poop.

If I missed anything, or you think something should be done differently, let me know in the comments below.

As always, thank you for reading!

Building an admin dashboard layout with css and a touch of javascript

This is the end of this article about using CSS and JavaScript to build example code for management dashboard layout. For more relevant CSS management dashboard layout content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!