Navigation

Navigation elements are crucial for the user’s orientation. If poorly done, the navigation misleads the user until he is lost deep down in your website. But well designed and distinguishable navigation elements lead the user exactly to the spot he wants to get to, without any detours. That’s less hassle for your user, and more happy users for you!

Topbar navigation
 
Topbar navigation

Mobile navigation
 
Mobile navigation

Navigation elements (under construction)

 
 
General CSS for navigation elements

nav {
  font-size: 14px;
  color: #636b7b;
  font-weight: 400;
  width:250px;
}
nav a {
  color:#5a6677;
  text-decoration: none;
  position: relative;
}
nav a:hover,
nav a.active {
  color: #0292d2;
}
nav .first-level {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  padding: 8px 0 8px 24px;
}
nav .second-level {
  display: block;
  padding: 8px 8px 8px 56px;
  font-weight: 600;
}
nav .second-level.toggled::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='#5a6677' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpolyline points='6 9 12 15 18 9' %3E%3C/polyline%3E%3C/svg%3E");
  content: "";
  position: absolute;
  left: 24px;
  top:12px;
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
  pointer-events: none;
}
nav .second-level.toggled.active::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='#0292d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpolyline points='6 9 12 15 18 9' %3E%3C/polyline%3E%3C/svg%3E");
  transform: rotate(0deg);
}
nav .third-level {
  display: block;
  padding: 8px 8px 8px 56px;
  height: auto;
  opacity: 1;
  pointer-events: all;
  transition: height .3s,opacity .3s,padding .3s;
  font-stretch: 100%;
}
nav .third-level.toggled::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='#5a6677' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpolyline points='6 9 12 15 18 9' %3E%3C/polyline%3E%3C/svg%3E");
  content: "";
  position: absolute;
  right: 8px;
  top:12px;
  width: 16px;
  height: 16px;
}
nav .fourth-level {
  display: block;
  padding: 8px 8px 8px 72px;
  height: auto;
  opacity: 1;
  pointer-events: all;
  transition: height .3s,opacity .3s,padding .3s;
}

Tabs

Tabs are used for switching beween different layouts.

 
 
CSS for tabs

.tabs_wrapper {
  background: #fafcfd; /* $light-background */
  box-shadow: inset 0 -3px 0 0 #e6ebf0;   /* $dark-gray */
}
 
.tabs_list {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  margin: 0 auto;
  max-width: 1220px;
  font-weight: 600;
  font-size: 14px;
}
 
.tabs_list_item {
  flex: 0 0 auto;
  border-bottom: 3px solid transparent;
  transition: background .3s;
}
 
.tabs_is_active {
  color: #0292d2;
  border-bottom-color: currentColor;
  background: transparent;
  cursor: default;
}
 
.tabs_list_item a {
  display: block;
  color: inherit;
  text-decoration: inherit;
  padding: 16px;
}
 
.tabs_list_item:hover,
.tabs_list_item:focus {
  outline: none;
  background: #e6ebf04d;  /* $dark-gray .3 opacity */
}

Segments

With the help of a segment button one can change a dataset or a filter.



 
 
CSS for segments

.controls_group {
  display: inline-flex;
  align-items: center;
  box-shadow: 0 0 0 1px rgba(43,45,80,.1), 0 2px 5px 0 rgba(43,45,80,.08), 0 1px 1.5px 0 rgba(0,0,0,.07), 0 1px 2px 0 rgba(0,0,0,.08);
  border-radius: 3px;
  background: #fff;
}
 
.controls_group .active {
  pointer-events: none;
  cursor: default;
  background: #fafcfd;
  color: #0292d2;
}
 
.controls_group button  {
  box-shadow: none;
  border:none;
  border-radius:0;
  border-left: 1px solid #e6ebf0; /* $dark-gray */
  transition: background .3s;
}
 
.controls_group button:hover,
.controls_group button:focus {
  outline: none;
  background: #fafcfd;
}
 
.controls_group button:first-child {
  border-left-color: transparent;
  border-radius: 3px 0 0 3px;
}
 
.controls_group button:last-child {
  border-radius: 0 3px 3px 0;
}