> ## Documentation Index > Fetch the complete documentation index at: https://docs.zonely.gen.tr/llms.txt > Use this file to discover all available pages before exploring further. # Navbar and Footer > Prepare menu links and modal windows; edit the content of font or button, icons, tabs and sub menu relationships. Page Creative **Home**The area with upper menu cards. **Footer Menu**regulates the connection groups under the preview. Close **Contact and footer** The section is for social account addresses. [![Navbar editing area, Footer Menu, Social accounts](https://mintcdn.com/zonely-a8cd49e7/1YZhYgRlU_SSqjAM/images/panel/page-builder-guide-20261025/27-menu-konumlari-en.png?fit=max\&auto=format\&n=1YZhYgRlU_SSqjAM\&q=85\&s=04765b617fe710000f377b6a7dd3d00e)](https://docs.zonely.gen.tr/images/panel/page-builder-guide-20261025/27-menu-konumlari-en.png) > [card] 1. Navbar editing area > > Use the top menu cards and the new item insert button here. > [card] 2. Footer Menu > > Open the bottom menu with the arrow button; edit groups and connections. > [card] 3. Social accounts > > Enter Facebook, X, Instagram, YouTube and Discord addresses from this section. ## Open the item you will edit Next to the main menu card **ok**, open and close the sublinks. Your own item **Pen** Edit that record by pressing the button. Next item for Navbar **+** Use the button. [![Open the bottom menu, Carry handle, Edit the item](https://mintcdn.com/zonely-a8cd49e7/1YZhYgRlU_SSqjAM/images/panel/page-builder-guide-20261025/28-navbar-alt-ogeler-en.png?fit=max\&auto=format\&n=1YZhYgRlU_SSqjAM\&q=85\&s=b875af333dfa83b54b4089c5583179b4)](https://docs.zonely.gen.tr/images/panel/page-builder-guide-20261025/28-navbar-alt-ogeler-en.png) > [card] 1. Open the bottom menu > > The arrow next to the card, closes and closes the sublinks. > [card] 2. Transport handle > > Move the item to its own order or under another main menu. > [card] 3. Edit the item > > The pen opens the settings of the corresponding link; the tools of each item are separate. You can access the cards that do not appear in the horizontal strip with right/sol arrows. Navigate the visitor menu in the preview, it is for organizing the Navbar cards menu on it. ## Fill out common menu areas **Menu Title**The visitor is the name to click. **icon** Select a icon from the field; you can search the icon when selectively opened. **Top Menu** Determine that the independent item or other menu has the lower connection. **Menu for yourself**is the main element independent. When you select another menu, the item will be placed under it. Writing the name of another menu in the header field does not establish this relationship. **RGB** The option manages color effect on the menu where it is offered. **Sub Information** Prepare additional explanation of the item in the field. Menu type determines what will happen when clicked: **Regular Link** opens an address, **modal** window opens on the same page. ## Add link to a page 1. Prepare menu header and icon. 2. **Menu Type → Normal Link** Select. 3. **Page Type** Find the target page from the selective. If the choice is required for additional products, user or page information, fill in the relevant area. 4. If you enter your address **Special Page** Select and type in-site path or full external address. 5. **Tab Status** Select the same or new tab with. 6. Checking and controlling the upper menu relationship and appearance preferences **Publish** Save with. [![Menu header, Icon, Menu type, Connection and tab, Tab status, Bottom information, Top menu relationship, RGB view](https://mintcdn.com/zonely-a8cd49e7/SCpALW29XPi0GiK6/images/panel/content-appearance-20261026/menus/15-normal-menu-en.png?fit=max\&auto=format\&n=SCpALW29XPi0GiK6\&q=85\&s=7da3b2fb68ead2eac3e3606a3f3c777c)](https://docs.zonely.gen.tr/images/panel/content-appearance-20261026/menus/15-normal-menu-en.png) > [card] 1. Menu header > > Enter the name the visitor will see in the upper menu. > [card] 2. Icon > > Select the icon to be used next to the menu header. > [card] 3. Menu type > > Select the Normal Link to switch to a page. > [card] 4. Connection and tab > > Type the target address, make the same tab or new tab selection. > [card] 5. Tab status > > Select the connection to open on the existing or new tab. > [card] 6. Sub-information > > Prepare additional explanation that will accompany menu element. > [card] 7. Top menu relationship > > Select the menu that is connected if the bottom item will be. > [card] 8. RGB view > > Open the color menu effect with this option. For example, you can connect a item titled Help Center to your site’s help page. To put a content you create into the menu [Special Pages](https://docs.zonely.gen.tr/en/guides/special-pages.md) Check the guide. ## What is modal, when used? **modal**The window opened on the existing page when the visitor clicks on the menu. You can use a short description or to collect several links in one window. The window content is shown instead of going to the target URL. Before preparing the modal menu **Menu Type → Modal**, then **Modal Content** Choose your choice. **Text Only** a description, **Buttons** and clickable links. ### Show description only with the article 1. New item **Menu Title** Type Support Information for example. 2. Select the icon and **Menu Type → Modal** Do. 3. **Modal Content → Write Only** Select. 4. Close **Modal Text** Write a description to show visitors to the area. 5. If necessary **Top Menu** insert the item into one group with the window. 6. Checking and controlling the image preferences **Publish** Press the button. [![Menu header, Icon, Modal menu, Content type, Modal post, Menu location, Color effect](https://mintcdn.com/zonely-a8cd49e7/SCpALW29XPi0GiK6/images/panel/content-appearance-20261026/menus/16-metin-menu-en.png?fit=max\&auto=format\&n=SCpALW29XPi0GiK6\&q=85\&s=42049b21277ca628308781b2dcbc6281)](https://docs.zonely.gen.tr/images/panel/content-appearance-20261026/menus/16-metin-menu-en.png) > [card] 1. Menu header > > Write the menu name that the visitor will click. > [card] 2. Icon > > Set a icon that fits the menu. > [card] 3. Modal menu > > Modal menu type Modal, just select the contents as a Font. > [card] 4. Content type > > Just select the article to show a description in this window. > [card] 5. Modal post > > Type the contents of the window opened by clicking on the menu. > [card] 6. Menu location > > You can also place modal item under one of the top menu. > [card] 7. Color effect > > Open the RGB effect of the menu header according to your request. Modal Font is used instead of this type of normal connection address. Prepare a text that the brief support description can read without leaving the community information or visitor from the page. After registration, click on this menu in the view of the visitor. Check the text comes true and the window can be turned off. Open the form from the pen of the same menu to change text **Update** Use the process. ### Offer a few target connections with buttons Menu type **modal**, content **Buttons** Select. **Add Buton** Open the line with the button. Fill three areas of each line: * **Push Button Head:** The article to be clicked on the window is the Discord Community. * **Buton URL:** It is the opener address of the button. * **Button Color:** The appearance color of the button. [![Menu header, Buttons mode, Pushbutton Head, Pushbutton URL, Pushbutton Color, Pushbutton Insert, Top menu, RGB](https://mintcdn.com/zonely-a8cd49e7/SCpALW29XPi0GiK6/images/panel/content-appearance-20261026/menus/18-buton-menu-en.png?fit=max\&auto=format\&n=SCpALW29XPi0GiK6\&q=85\&s=400dac11cef54905d014e46b5281b323)](https://docs.zonely.gen.tr/images/panel/content-appearance-20261026/menus/18-buton-menu-en.png) > [card] 1. Menu header > > Type the menu name that will open the links window. > [card] 2. Buttons mode > > Show multiple target connections on the window that opens. > [card] 3. Push Button Head > > Type the name of the button to click on the window. > [card] 4. Pushbutton URL > > Type the address to open when click on this button. > [card] 5. Push Button Color > > Select the color of the button. > [card] 6. Insert Button > > Open the new line; Sil button removes the corresponding line only. > [card] 7. Top menu > > Position the item under the independent or other menu. > [card] 8. RGB > > Select the effect preference of menu header. Renew for a second button **Add Buton** Use. For example, you can connect one button to Discord, the other to the Help Center. Each line has its own header, address and color. Line **Delete** button removes the corresponding button only. Complete and save the upper menu relationship of the menu, icon and other areas of view. Open the menu in the visitor view; click on each button and check its own goal. ## Change Navbar queue and sublinks Card **from the transport icon or header field** hold. Leave the point between two main cards to sort at the same level. Take a link to the middle of the target main card to get under another menu. Leave the bottom list to the desired order when it is opened. Remove the horizontal Navbar from the open list to make the main item back the bottom link. structure **main menu + bottom item** as two levels. You cannot create a third level by taking a group of sublinks into another group. Keep the arrangement, delete or pop-up arrow buttons not the carrying area. ## Prepare footer connections Under Preview **Footer Menu** open the strip with the arrow button. Group headers and sublinks appear as separate cards. Each record pen opens its own editing form. [![Footer tools, Main group, Bottom link, Group settings](https://mintcdn.com/zonely-a8cd49e7/1YZhYgRlU_SSqjAM/images/panel/page-builder-guide-20261025/30-footer-gruplari-en.png?fit=max\&auto=format\&n=1YZhYgRlU_SSqjAM\&q=85\&s=81e268ec77e58d0d8760c4dcfc28a84c)](https://docs.zonely.gen.tr/images/panel/page-builder-guide-20261025/30-footer-gruplari-en.png) > [card] 1. Footer tools > > Open the panel or prepare new registration with Add Items. > [card] 2. Main group > > Change the column order of the submen by carrying the group. > [card] 3. Bottom link > > Sort links in group or move it to another group. > [card] 4. Group settings > > Use their own editing tools of each group and connection. **Add to Item** Sign up with new registration. Enter the header and icon. Set page type, target and tab preference for normal connection. **Top Menu** Select the group that will be independent item or connected in the field. [![Bottom menu element, Icon, Menu type, Target link, Tab, Bottom menu group](https://mintcdn.com/zonely-a8cd49e7/SCpALW29XPi0GiK6/images/panel/content-appearance-20261026/menus/19-footer-menu-en.png?fit=max\&auto=format\&n=SCpALW29XPi0GiK6\&q=85\&s=877cceca5920b0af36c4338f92dcab0f)](https://docs.zonely.gen.tr/images/panel/content-appearance-20261026/menus/19-footer-menu-en.png) > [card] 1. Bottom menu element > > Type the header to show in Footer. > [card] 2. Icon > > Select the icon of the footer link. > [card] 3. Menu type > > Select normal connection or modal window. > [card] 4. Target link > > Set the visitor’s opener address and tab selection. > [card] 5. Tab > > Determine the opening of the target on the same or new tab. > [card] 6. Bottom menu group > > Show the item on itself or under other menu. In Footer **Menu Type → Modal** You can use it. **Text Only** Fill the Modal Font when selected; **Buttons** Prepare header, URL and color fields of each button when selected. Registration and control steps of two modal types in Navbar are available here. Drag the group header into the column row, drag the bottom link, change its own sequence. You can change the link to the group by leaving the other group on the drop-down list. ## Save and disconnect reset New menu item **Publish**, existing item **Update** saved with. Drag and drop Navbar and Footer cards **order and upper menu relationship are automatically saved**; wait for the result notification. Your general site settings **Save All** button is not used instead of these menu forms. Recheck the final location of the item if there is error notification in ranking. Navbar or Footer Menu header **circular arrow**opens the corresponding list to the initial installation layout. When you confirm, the menu list is replaced by the installation items. Navbar and footer are reset separately. ## Enter social account addresses Close **Contact and footer** Write Facebook, X, Instagram, YouTube and Discord addresses from the section. Use the profile, channel or invitation link as a full address. [![Social account addresses, YouTube, Discord invitation](https://mintcdn.com/zonely-a8cd49e7/6szifUMHSc9sb8vV/images/panel/page-builder-guide-20261025/17-sosyal-hesaplar-en.png?fit=max\&auto=format\&n=6szifUMHSc9sb8vV\&q=85\&s=f883eb16ee3e21f3af5737e5701efcea)](https://docs.zonely.gen.tr/images/panel/page-builder-guide-20261025/17-sosyal-hesaplar-en.png) > [card] 1. Social account addresses > > Type full profile links for Facebook, X and Instagram. > [card] 2. YouTube > > Enter the opener channel address of the visitor. > [card] 3. Discord invitation > > Use the valid participation link of your community. These social account areas are general settings; **Save All** saved with. Finally, try to open and open the upper menu, sublinks, modal windows and footer connections in the phone view. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.