Yml Settings

🎩 header.yml

# Introduction

The header.yml file is responsible for setting up the top header navigation component.

Here is an example of the header.yml file:

        navigation:
  mobile:
    hamburger:
      icon: 'hamburger'
      hide: 'lg'
      display: true
    truncate:
      text: '...'
      hide: 'lg'
      display: true

  hide: 'md' #xs, sm, md, lg, xl, 2xl, none
  containerClass: ''
  listClass: 'lg:pl-20'
  listItemClass: ''
  activeBgClass: ''
  activeTextClass: ''
  bgClass: ''
  textClass: ''
  iconClass: ''
  underlineClass: ''
  items:
    - icon:
        active: ['fas', 'cube']
        base: ['fal', 'cube']
        size: 'lg'
      title: Dashboard
      href: /dashboard
    - icon:
        active: ['fas', 'cube']
        base: ['fal', 'cube']
        size: 'lg'
      title: Profile
      href: /profile
    - icon:
        active: ['fas', 'cube']
        base: ['fal', 'cube']
        size: 'lg'
      title: Dashboard 1
      href: /dashboard/1
    - icon:
        active: ['fas', 'cube']
        base: ['fal', 'cube']
        size: 'lg'
      title: Dashboard 2
      href: /dashboard/2
    - icon:
        active: ['fas', 'cube']
        base: ['fal', 'cube']
        size: 'lg'
      title: Dashboard 3
      href: /dashboard/3

      

# Navigation

# Mobile

# Hamburger

This object is responsible for configuring basic hamburger menu button configurations. It has the icon property to set the icon of the menu button, it has the hide property to set when the button is hidden, and it has the display property to set the display of the menu button to true or false.

For more information check out the hamburger.yml.

# Truncate

This object is responsible for configuring the top header navigation truncate. It has the text property to set the text of the truncated menu button, it has the hide property to set when the top header navigation truncate to hidden, and it has the display property to set the display of the top header navigation truncate to true or false.

# Hide

This is responsible to set which display side the top header navigation will be hidden.

# ContainerClass

This is responsible for adding extra tailwindcss classes to the top header navigation container element.

# ListClass

This is responsible for adding extra tailwindcss classes to the list element of the top header navigation element.

# ListItemClass

This is responsible for adding extra tailwindcss classes to the each item of the list element of the top header navigation element.

# ActiveBgClass

This is responsible for adding extra tailwindcss classes to the background active item of list element of the top header navigation element.

# ActiveTextClass

This is responsible for adding extra tailwindcss classes to the text active item of list element of the top header navigation element.

# BgClass

This is responsible for adding extra tailwindcss classes to the background element of the top header navigation element.

# TextClass

This is responsible for adding extra tailwindcss classes to the text elements of the top header navigation element.

# IconClass

This is responsible for adding extra tailwindcss classes to the icon elements of the top header navigation element.

# UnderlineClass

This is responsible for adding extra tailwindcss classes to the underline elements of the top header navigation element.

# Items

This is responsible for displaying all the items of the top header navigation element, it is an array of objects. and the objects schema is like this:

        icon:
  active: ['icon type', 'icon name'],
  base: ['icon type', 'icon name'],
  size: 'size of the icon'
title: 'title of the page'
href: 'href of the page'