extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'breadcrumbs'
  - var parent = 'components'
  - var title = 'Breadcrumbs - Components - Spectre.css CSS Framework'
  - var description = 'Breadcrumbs are used as navigational hierarchies to indicate current location. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('breadcrumbs', 'Breadcrumbs')
    include ../_layout/_ad-g.pug

    p Breadcrumbs are used as navigational hierarchies to indicate current location.

    .docs-demo.columns
      .column.col-12
        ul.breadcrumb
          li.breadcrumb-item
            a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home
          li.breadcrumb-item
            a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings
      .column.col-12
        ul.breadcrumb
          li.breadcrumb-item
            a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home
          li.breadcrumb-item
            a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings
          li.breadcrumb-item
            a.tooltip(href="#breadcrumbs" data-tooltip="Change avatar") Change avatar
      .column.col-12
        ul.breadcrumb
          li.breadcrumb-item
            a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home
          li.breadcrumb-item
            a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings
          li.breadcrumb-item
            | Search result: 
            a.tooltip(href="#breadcrumbs" data-tooltip="Search result: Spectre") Spectre

    p
      | Add a container element with the #[code breadcrumb] class.
      | And add child elements with the #[code breadcrumb-item] class.

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <ul class="breadcrumb">
            <li class="breadcrumb-item">
              <a href="#">Home</a>
            </li>
            <li class="breadcrumb-item">
              <a href="#">Settings</a>
            </li>
            <li class="breadcrumb-item">
              <a href="#">Change avatar</a>
            </li>
          </ul>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug