Breadcrumb custom separators and colors

Inspect the full details and code of a selected snippet

<div class="uk-flex-1 uk-flex">
  <div class="uk-container uk-container-small uk-flex-1 uk-flex uk-flex-column uk-margin-medium-top uk-margin-medium-bottom">
    <div class="uk-flex-1 uk-flex uk-flex-column uk-flex-center">
      <div class="uk-width-1-1">
        <div class="uk-text-small uk-text-muted uk-text-uppercase uk-text-semibold uk-margin-small-bottom">Breadcrumb custom separators and colors</div>
        <div class="uk-card uk-card-default uk-box-shadow-remove uk-padding-small uk-border-rounded">
          
          <nav>
            <ul class="uk-breadcrumb uk-margin-remove">
              <li class="uk-active"><a href="#">Default</a></li>
              <li><a href="#">Linked</a></li>
              <li class="uk-disabled"><a>Disabled</a></li>
              <li><span>Page title</span></li>
            </ul>
          </nav>
          <nav class="uk-margin-top">
            <ul class="uk-breadcrumb uk-breadcrumb-primary uk-breadcrumb-chevron uk-margin-remove">
              <li class="uk-active"><a href="#">Chevron</a></li>
              <li><a href="#">Linked</a></li>
              <li class="uk-disabled"><a>Disabled</a></li>
              <li><span>Page title</span></li>
            </ul>
          </nav>
          <nav class="uk-margin-top">
            <ul class="uk-breadcrumb uk-breadcrumb-secondary uk-breadcrumb-chevrons uk-margin-remove">
              <li class="uk-active"><a href="#">Chevrons</a></li>
              <li><a href="#">Linked</a></li>
              <li class="uk-disabled"><a>Disabled</a></li>
              <li><span>Page title</span></li>
            </ul>
          </nav>
          <nav class="uk-margin-top">
            <ul class="uk-breadcrumb uk-breadcrumb-success uk-breadcrumb-vertical uk-margin-remove">
              <li class="uk-active"><a href="#">Vertical</a></li>
              <li><a href="#">Linked</a></li>
              <li class="uk-disabled"><a>Disabled</a></li>
              <li><span>Page title</span></li>
            </ul>
          </nav>
          <nav class="uk-margin-top">
            <ul class="uk-breadcrumb uk-breadcrumb-warning uk-breadcrumb-colons uk-margin-remove">
              <li class="uk-active"><a href="#">Colons</a></li>
              <li><a href="#">Linked</a></li>
              <li class="uk-disabled"><a>Disabled</a></li>
              <li><span>Page title</span></li>
            </ul>
          </nav>
          <nav class="uk-margin-top">
            <ul class="uk-breadcrumb uk-breadcrumb-danger uk-breadcrumb-dot uk-margin-remove">
              <li class="uk-active"><a href="#">Dot</a></li>
              <li><a href="#">Linked</a></li>
              <li class="uk-disabled"><a>Disabled</a></li>
              <li><span>Page title</span></li>
            </ul>
          </nav>
          
        </div>
      </div>
      <div class="uk-text-mini uk-text-right">made by <b>Antonius</b></div>
    </div>
  </div>
</div>

/* Snippets style */
body { background-color: #ebebeb; }
.uk-box-shadow-remove { box-shadow: none; }
.uk-text-mini { font-size: 8px; }
:root {
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-active: #1d4ed8;
  --color-secondary: #6366f1;
  --color-secondary-hover: #4f46e5;
  --color-secondary-active: #4338ca;
  --color-success: #22c55e;
  --color-success-hover: #16a34a;
  --color-success-active: #15803d;
  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-active: #b45309;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-active: #b91c1c;
}
/* Style */
.uk-breadcrumb .uk-disabled a, .uk-breadcrumb .uk-disabled a:hover {
  color: inherit !important;
}
/* Colors */
.uk-breadcrumb-primary a, .uk-breadcrumb-primary > :last-child > span {
  color: var(--color-primary);
}
.uk-breadcrumb-primary a:hover {
  color: var(--color-primary-hover);
}
.uk-breadcrumb-primary .uk-active {
  font-weight: 500;
  color: var(--color-primary-active);
}
.uk-breadcrumb-secondary a, .uk-breadcrumb-secondary > :last-child > span {
  color: var(--color-secondary);
}
.uk-breadcrumb-secondary a:hover {
  color: var(--color-secondary-hover);
}
.uk-breadcrumb-secondary .uk-active {
  font-weight: 500;
  color: var(--color-secondary-active);
}
.uk-breadcrumb-success a, .uk-breadcrumb-success > :last-child > span {
  color: var(--color-success);
}
.uk-breadcrumb-success a:hover {
  color: var(--color-success-hover);
}
.uk-breadcrumb-success .uk-active {
  font-weight: 500;
  color: var(--color-success-active);
}
.uk-breadcrumb-warning a, .uk-breadcrumb-warning > :last-child > span {
  color: var(--color-warning);
}
.uk-breadcrumb-warning a:hover {
  color: var(--color-warning-hover);
}
.uk-breadcrumb-warning .uk-active {
  font-weight: 500;
  color: var(--color-warning-active);
}
.uk-breadcrumb-danger a, .uk-breadcrumb-danger > :last-child > span {
  color: var(--color-danger);
}
.uk-breadcrumb-danger a:hover {
  color: var(--color-danger-hover);
}
.uk-breadcrumb-danger .uk-active {
  font-weight: 500;
  color: var(--color-danger-active);
}
/* Separators */
.uk-breadcrumb-chevron > :nth-child(n+2):not(.uk-first-column)::before {
  position: relative;
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 0.2em solid #999;
  border-top: 0.2em solid #999;
  transform:rotate(45deg);
  opacity: .4;
}
.uk-breadcrumb-chevrons > :nth-child(n+2):not(.uk-first-column)::before {
  position: relative;
  content: "\00BB";
  display: inline-block;
  font-size: 2rem;
  opacity: .4;
  line-height: .1rem;
  top: 4px;
}
.uk-breadcrumb-vertical > :nth-child(n+2):not(.uk-first-column)::before {
  position: relative;
  content: "|";
  display: inline-block;
  opacity: .4;
  line-height: .1rem;
}
.uk-breadcrumb-colons > :nth-child(n+2):not(.uk-first-column)::before {
  position: relative;
  content: ": :";
  display: inline-block;
  opacity: .4;
  line-height: .1rem;
}
.uk-breadcrumb-dot > :nth-child(n+2):not(.uk-first-column)::before {
  position: relative;
  content: "\2022";
  display: inline-block;
  opacity: .4;
  line-height: .1rem;
  font-size: 1.5rem;
  top: 4px;
}

Information

Detailed overview of a selected code snippet

antonius

21.03.2025, 11:09:40

28.03.2025, 11:14:35

uk-active, uk-border, uk-box, uk-breadcrumb, uk-card, uk-container, uk-disabled, uk-first, uk-flex, uk-margin, uk-padding, uk-text, uk-width

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!