Skip to content

Kirby 3.5.7.1

Header

<k-header>

The Header component is a composition of a big fat headline plus two optional slots for buttons — directly below the headline and on the right. The Header is a fundamental part of any main Panel view. While we use the left slot for option buttons, the right slot is mainly used for prev/next navigation between items such as pages or users.

<k-header>
  My awesome Panel view
  <k-button-group slot="left">
    <k-button icon="open">Open</k-button>
    <k-button icon="cog">Settings</k-button>
  </k-button-group>
  <k-button-group slot="right">
    <k-button :disabled="true" icon="angle-left"></k-button>
    <k-button icon="angle-right"></k-button>
  </k-button-group>
</k-header>

CSS class

.k-header