> For the complete documentation index, see [llms.txt](https://docs.sportigio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sportigio.com/english/appearance/website-menu.md).

# Webpage Menu

## Adding Element

![](/files/-M3BMvwt2mKZc3JNdP7N)

You should click + ADD ELEMENT button in order to add new menu element. You will see a couple of forms, which you need to fill in:

* **Title** (displayed name)
  * add icon possibility (Font Awesome name - look below)
* **Position** (Top Menu, Top Buttons, Footer)
  * you can add a "parent element" after choosing **sub-menu**
* **Type**
  * Page - you choose from Pages (infopages) added by you
  * Module - pre-defined, ready modules, e.g. players, schedule, etc.
  * Link - hyperlink to external website (e.g. <https://example.com/page>)
* You can choose "**Open in new window**"

## Menu Management

### Menu element order

You can manage order of your menu element, simply by clicking appropriate arrow, to move it lower or higher (to the left or right):

![After clicking this arrow, element will be moved immediately, no refresh needed](/files/-M4f1kKVpUH7qwKbMoWI)

## Menu positions

![Example of nav bar with Menu](/files/-M4f1yEDXz5MIlW5ET0K)

### Top menu

Top elements on the picture above are:

* News
* Players
* Games
* Sponsors
* Media

### Buttons (TOP)

Top button element on the picture above is "Tickets" - blue button:

![Background colour is your default colour form page settings](/files/-M4f2FlRFBr1u1K_TmSL)

### Footer

Footer menu elements will be displayed here (center, between 2020 and "powered by Sportigio"):

![](/files/-M4f2U_f6MDlFNeAF3Jt)

## Menu Type

When you add menu element, you will see three available types:

### Page

Element redirects user to the page, created by you in Pages sections of our admin panel:

{% content-ref url="/pages/-M3BD0tiXEJcP14oj0Cu" %}
[Pages](/english/pages.md)
{% endcontent-ref %}

### Module

Element redirects user to one of the following elements:

* **News** - list of all articles
* **Video list** - section, displaying all added videos
* **Photos Gallery** - list of all photo galleries
* **Players** - roster of your team (Team photo + players list + coaches, team members)
* **Schedule & Results** - list of all added games + results
* **Standings** - auto-generated standings of the league, based on results, which you add to your admin panel
* **Sponsors** - section with list of all sponsors, added to your panel
* **Calendar (from Online Office)** - displays calendar with list of events, added to your calendar in Online Office)

### Link

Element redirects user to chosen URL.

## Sub-menu

If any element of the menu has more child-elements - which means that it is a dropdown element has "sub-menu" indicator  <img src="/files/-M3BVf7gOfvQ0i1-8sD1" alt="" data-size="original">. Please see the example below:

![](/files/-M4f-4wAbFIePNnKthbW)

![Media element is a dropdown - if user clicks it, he will see its "sub-menu" elements ](/files/-M4f-FAxJ88gdfk01-fB)

"Media" menu element is a "parent element" for "Photos" and "Videos" elements, which are its **sub-menu** elements.

After clicking "sub-menu" button, you will be able to manage order of the sub-menu elements:

![](/files/-M4f05BXyc614vJW5m2S)

## Icons in menu elements

After clicking "Icon" <img src="/files/-M3G71M3touQO0zrC0pt" alt="" data-size="original"> option below the title, you will se extended form, where you can type (paste) name of the icon, chosen from Font Awesome library ([**Font Awesome \[link\]**](https://fontawesome.com/icons?d=gallery)), e.g. fas fa-card (exclude other characters like "\<i class=" and other redundant).

![](/files/-M3G6vR4IGLmpEIujOMk)

[**>>> Link: Font Awesome**](https://fontawesome.com/icons?d=gallery)