Page header component
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">
<!-- Page header content -->
<div class="page-header-content header-elements-md-inline">
<!-- Page title -->
<div class="page-title">
<h4><i class="icon-arrow-left52 mr-2"></i> Page Title</h4>
</div>
<!-- /page title -->
<!-- Header elements -->
<div class="header-elements">
...
</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 page header components:
<!-- Page header -->
<div class="page-header page-header-light">
<!-- Header content -->
<div class="page-header-content header-elements-md-inline">
<!-- Header title -->
<div class="page-title d-flex">
<h4><i class="icon-arrow-left52 mr-2"></i> Page title</h4>
<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
</div>
<!-- /header title -->
<!-- Header elements -->
<div class="header-elements d-none">
<div class="d-flex justify-content-center">
<a href="#" class="btn btn-link btn-float text-default">
<i class="icon-bars-alt text-primary"></i>
<span>Statistics</span>
</a>
<a href="#" class="btn btn-link btn-float text-default">
<i class="icon-calculator text-primary"></i>
<span>Invoices</span>
</a>
<a href="#" class="btn btn-link btn-float text-default">
<i class="icon-calendar5 text-primary"></i>
<span>Schedule</span>
</a>
</div>
</div>
<!-- /header elements -->
</div>
<!-- /header content -->
</div>
<!-- /page header -->
Breadcrumb component
Breadcrumb line component
By default, breadcrumbs component is placed inside custom <div class="breadcrumb-line" /> container. This container has a lot of different options, such as different placement, background and border color options, optional components etc. 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="breadcrumb-line breadcrumb-line-light header-elements-inline">
<!-- Breadrcumb -->
<div class="breadcrumb">
...
</div>
<!-- /breadcrumb -->
<!-- Header elements -->
<div class="header-elements">
...
</div>
<!-- /header elements -->
</div>
<!-- /breadcrumb line component -->