Page header component
Overview
Page header - component that displays page title and optional custom components. Depending on the layout variation, page header can have transparent, white, dark, custom light and dark colors. By default, page header supports title with or without icon, subtitle and optional components that appear on the right side of the header area.
All optional components are available in both card header and page header components and use same markup, all of them are adapted to any height of the headers and always vertically centered. Mobile layout varies: visible inline, visible stacked, hidden and collapsible.| Component | Description |
|---|---|
| Buttons | All button options, including floating buttons |
| Button dropdowns | Button dropdowns with all available options |
| Labeled buttons | Transparent buttons with icon and text label |
| Outlined buttons | Transparent buttons with custom border and text colors |
| Input fields | All available input fields with options |
| Input groups | Input groups with all available options |
| Checkboxes, radios | Unstyled, styles, switchery toggles and Bootstrap switches |
| Selects | Default, styled, Select2, Bootstrap multiselect and custom BS selects |
| File input | Single file input, styled and unstyled |
| Tabs | Tabs nav, available in panel header only |
| Pills | Pills nav, available in panel header only |
| Text, links | Text with links, all possible options |
| Badges | Badges and badge pills in all variations |
| Icons | Single and multiple icons list |
| Pagination | Pagination and pager components in 3 sizes |
| Date picker | Date range picker attached to the button and with custom display format |
Page header markup
Page header markup is identical in all layouts, but in some layouts default page header classes can be different. This was made to reduce number of classes in markup if default page header style is different. Default page header markup is:
<!-- Page header -->
<div class="page-header page-header-light shadow">
<!-- Page header content -->
<div class="page-header-content d-lg-flex align-items-lg-center">
<!-- Page title -->
<h4 class="page-title mb-0">
Page Title
</h4>
<!-- /page title -->
<!-- Header elements -->
<div class="ms-lg-auto">
...
</div>
<!-- /header elements -->
</div>
<!-- /page header content -->
</div>
<!-- /page header -->
Page header elements
The table above demonstrates what components can be ised in page header area. All these components are completely optional. All components are hidden on mobiles and tablets and can be reached by clicking toggle button on the right side of the header area, all components are displayed as block elements and appear below the page header. In future releases header components list will be extended with new components according to the functionality additions.
Example of collapsible page header components:
<!-- Page header -->
<div class="page-header page-header-light shadow">
<!-- Header content -->
<div class="page-header-content d-lg-flex align-items-lg-center">
<!-- Header title -->
<div class="d-flex">
<h4 class="page-title mb-0">
Horizontal Nav - <span class="fw-normal">Item Elements</span>
</h4>
<a href="#page_header" class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto" data-bs-toggle="collapse">
<i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
</a>
</div>
<!-- /header title -->
<!-- Header elements -->
<div class="collapse d-lg-block my-lg-auto ms-lg-auto" id="page_header">
<div class="d-sm-flex align-items-center mb-3 mb-lg-0 ms-lg-3">
[element #1]
<div class="vr d-none d-sm-block flex-shrink-0 my-2 mx-3"></div>
[element #2]
</div>
</div>
<!-- /header elements -->
</div>
<!-- /header content -->
</div>
<!-- /page header -->
Breadcrumb component
Breadcrumb line
Breadcrumb line is a custom mix of breadcrumb and button list, created with our utility classes. The idea behind it is to extend default breadcrumbs with additional options, such as visibility and custom components displayed on the same line. In most cases it would be displayed inside page header. Similar to page header component, all breadcrumb line elements can have one of the following mobile options: visible inline, visible stacked, hidden and collapsible.
Breadcrumb line markup:
<!-- Breadcrumb line component -->
<div class="page-header page-header-light shadow">
<div class="page-header-content d-lg-flex border-top">
<div class="d-flex">
<div class="breadcrumb py-2">
<a href="index.html" class="breadcrumb-item"><i class="ph-house"></i></a>
<a href="#" class="breadcrumb-item">Link</a>
<span class="breadcrumb-item active">Current</span>
</div>
<a href="#breadcrumb_elements" class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto" data-bs-toggle="collapse">
<i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
</a>
</div>
<div class="collapse d-lg-block ms-lg-auto" id="breadcrumb_elements">
<div class="d-lg-flex mb-2 mb-lg-0">
<a href="#" class="d-flex align-items-center text-body py-2">
<i class="ph-lifebuoy me-2"></i>
Link
</a>
<div class="dropdown ms-lg-3">
<a href="#" class="d-flex align-items-center text-body dropdown-toggle py-2" data-bs-toggle="dropdown">
<i class="ph-gear me-2"></i>
<span class="flex-1">Dropdown</span>
</a>
<div class="dropdown-menu dropdown-menu-end w-100 w-lg-auto">
...
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /breadcrumb line component -->
Breadcrumb component
Limitless template allows you to use breadcrumb as a stand alone component or as a part of breadcrumb line container. Breadcrumb component can be used above and below page title, above and below page header content or as a page header element displayed on the right side. Breadcrumb itself supports a lot of customization options and placements, depending on layout.
Example markup:
<!-- Breadcrumb component -->
<div class="breadcrumb">
<a href="index.html" class="breadcrumb-item"><i class="ph-house"></i></a>
<a href="#" class="breadcrumb-item">Parent page</a>
<span class="breadcrumb-item active">Current page</span>
</div>
<!-- /breadcrumb component -->