Yml Settings

🐾 footer.yml

# Introduction

The footer.yml file is responsible for setting up the bottom navigation items which are loaded at the items array of footer.yml file.

Here is an example of the footer.yml file:

        components:
  main:
    style: 'pill' # default or pill
    position: 'bottom'
    activeBgClass: ''
    activeTextClass: 'text-secondary'
    activeIconClass: ''
    listClass: ''
    baseClass: 'py-1 bg-primary text-[--settings-text-contrast-primary-color]'
    textClass: 'text-slate-100'
    iconClass: 'text-slate-100'
    items:
      - icon:
          active: ['fas', 'cube']
          base: ['fal', 'cube']
          size: 'xl'
        title: Dashboard
        href: /dashboard
      - icon:
          active: ['fas', 'cube']
          base: ['fal', 'cube']
          size: 'xl'
        title: Profile
        href: /profile

      

# Components

# [Component Key]

This is the name you want to set your footer component to be, this name will be the name used on the footer.list item in the layout.yml file.

# Style

This is the style of the footer component, currently we have three styles to choose from:

• pill is a simple footer where it will have a pill shape.
• default is a very simple footer where it cover the entire bottom from left to right side of the screen all the way to the bottom.

# Position

This is the position of your footer component, which can be either bottom.

# ActiveBgClass

This is responsible for adding extra tailwindcss classes to the background of the active element of the footer component.

# ActiveTextClass

This is responsible for adding extra tailwindcss classes to the text of the active element of the footer component.

# ActiveIconClass

This is responsible for adding extra tailwindcss classes to the icon of the active element of the footer component.

# ListClass

This is responsible for adding extra tailwindcss classes to the list element that has all the items of the footer component.

# BaseClass

This is responsible for adding extra tailwindcss classes to all the items of the footer component.

# TextClass

This is responsible for adding extra tailwindcss classes to the text of all the items of the footer component.

# IconClass

This is responsible for adding extra tailwindcss classes to the icon of all the items of the footer component.

# Items

This is responsible for displaying all the items of the footer 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'