# Menu header

Functionality **Layout builder** is used to configure the display of information blocks in **the header** and **the footer** of the site. It allows you to create a convenient navigation structure for users by forming headings with links to the required pages (for example: “About us”, “Rules”, “FAQ”, “Contacts”).

### **Main features** <a href="#p2otmgr7cpmi" id="p2otmgr7cpmi"></a>

1. **List of layouts**<br>
   * This section displays all created layouts with their names.<br>
   * Each layout can be deleted using the trash can icon.<br>
2. **Layout structure**<br>
   * Each layout consists of **headings** (for example: “Information”, “Documents”, “Support”).<br>
   * You can attach a list of pages to a heading, which will be displayed as clickable links.<br>
   * This allows you to group information by topics and simplify the search for the needed page for the user.<br>
3. **Working with blocks**\
   In layout edit mode the following actions are available:<br>

   * **Add a new block** ("+ Add"). \
     **Important**: By adding a menu item you add a web-displayed menu with a direct link; by adding a menu list you can add several pre-created static pages from the admin panel section ["Pages"](https://lara-script.gitbook.io/docs/ru/funkcional-admin-paneli/resursy/stranicy), and when hovering over the main one, a dropdown menu will appear with several related pages previously created and added to this menu.
   * **Edit an existing block** (change the title, add/remove pages).

   **Note**, if you are editing an item previously created as a "Menu item", it will not be editable in the same way as a "menu list", where you will be able to choose a list from dropdown sections \
   Editing a menu item:

\
Editing a menu list will have characteristic dropdown menus and the ability to add/remove them:

<figure><img src="https://2918865942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp0ow3kIXHQDcl9DBdYiM%2Fuploads%2FtSEMQUlo2CHjvRyoXPB6%2F%D0%97%D0%BD%D1%96%D0%BC%D0%BE%D0%BA%20%D0%B5%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-10-08%20%D0%BE%2001.01.57.png?alt=media&#x26;token=a2efda18-1927-434d-809c-7e1b7cd8cb1c" alt=""><figcaption></figcaption></figure>

\
You will edit it the same way you created the menu.

<figure><img src="https://2918865942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp0ow3kIXHQDcl9DBdYiM%2Fuploads%2FF5kMs8GwwO4E45kJnktK%2F%D0%97%D0%BD%D1%96%D0%BC%D0%BE%D0%BA%20%D0%B5%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-10-08%20%D0%BE%2001.02.34.png?alt=media&#x26;token=9c2a287e-59e5-4f6d-ba80-798800b90ad1" alt=""><figcaption></figcaption></figure>

* **Move blocks** to change the order of their display in the footer or header.<br>
* **Delete blocks**, that are no longer needed.

\
If you want to create a menu list, the Name of the item must be exactly how the main window will be displayed in the admin panel header, and when hovering over it a dropdown menu will appear with the pages already added and preconfigured; it should look roughly like this, and you can independently choose their number and content:

<figure><img src="https://2918865942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp0ow3kIXHQDcl9DBdYiM%2Fuploads%2FImJDU032oIqHT9LCWF96%2Fimage.png?alt=media&#x26;token=fd277713-a8e8-48f8-9053-5efe789f0311" alt=""><figcaption></figcaption></figure>

And after saving, on the web part of the site this dropdown menu will look roughly like the following, where each page is clickable and leads to one of them<br>

<figure><img src="https://2918865942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp0ow3kIXHQDcl9DBdYiM%2Fuploads%2FDnL0IrgXsr5lA579OlgT%2Fimage.png?alt=media&#x26;token=f3e1a549-c4b5-40f5-9286-16d78e9fa493" alt="" width="507"><figcaption></figcaption></figure>

1. **Saving and activation**<br>

* After configuration you need to click the “Save” button.<br>
* If the layout is active, changes will immediately appear on the site.<br>
* You can prepare several variants in advance (for example: a standard header and a festive promo header) and quickly switch between them.<br>

✅ **Example of use**:\
If you add **a menu list**, a layout is created in the header with the heading **“Information”**, under which links are placed to the pages *About us*, *Service rules*, *Privacy policy*, *Contacts*. Next to it you can add **a menu item** a separate block **“Help”** with a link to *FAQ*.