> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Navigation # Getting Started You can add a Navigation bar to your website using the Navigation element. This article will cover how you can add and edit a navigation bar in your website, follow all the instructions accordingly. --- # How to add Navigation Element? To integrate the **Navigation Element** into your site, follow these steps: 1. Create a section by clicking the `+ Add New Section` Button. 2. Choose a suitable **Containers.** 3. In the central section, click on the **plus button** **`⨁`** labeled **Add Element or Container**. 4. Within the **Elements** section, choose **Navigation** from the options available. **Refer to the GIF & screenshot below to see this procedure visually:** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/mainlarge-2_h805h9.gif) ![The Navigation element after it is added](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_z432kj.png) --- # Personalizing Your Navigation Element Within the **Navigation Element** editor, you'll find these customizable features on the **General** Tab: * Logo * Links * Buttons * Dropdowns * Links Style * Button Style * Dropdown Style * Toggle * Settings and Background To modify these settings, access the **Navigation** Element Editor. **Refer to the screenshot below**: 👇🏼 ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_4hw459.png) --- ## Logo In the navigation editor's logo section, you can: * Update your logo * Set the logo image alt text * Define the clickable link * Adjust its width **Check out the screenshot for a visual guide:** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_9kmu5v.png) --- ## Links In the links section, you have the flexibility to customize your navigation bar links: * Change menu text * Connect them to specific places * Pick icons and adjust their size * Add extra details using Data Attributes Refer to the **Image** and **GIF** below for the visual demonstration: ![Links](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_rwknhp.png) ![Link edit options](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_yv850u.png) ![Changes you can make from the Links option](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/mainlarge-3_sxdvig.gif) --- ## Buttons In the Button options, you have control over the current button in your navigation bar. Here's what you can do: * Edit the text displayed on the button * Link it to a specific destination * Select icons near the button text and customize their color * Modify text and background colors, border width and color * Enhance functionality by adding Data Attributes to these buttons Refer to the **Image** below for the visual demonstration: ![Buttons](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1l35cnb.png) ![Button edit options](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_vibxi1.png) --- ## Dropdowns In the Dropdowns settings, you can expand your navigation bar menu: * Add dropdowns to the existing links * Include new dropdowns or remove existing ones * Customize dropdowns by editing or linking them Refer to the **GIF** below for the visual demonstration: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/mainlarge-4_116i8as.gif) This is what a dropdown will look like ⬇️ ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_mogd63.png) --- ## Links Style This option allows you to enhance the appearance of your navigation bar links: * Transform the font of navigation menus * Adjust menu alignment within the container * Set gaps between links * Customize link text and its icon settings * Define the hover effect for navigation menus Refer to the **Image** below for the visual demonstration: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_11fj5cj.png) --- ## Buttons Style The buttons in your navigation bar can be stylized inside this option. You can add icons, change their colors, add borders, and more. Refer to the **Image** and **GIFs** below for the visual demonstration: ![Button Styles](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_h4v6k9.png) ![Button Styles > Text customization options](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1b0iq0j.png) --- ## Dropdown Style This option helps you style Dropdowns within your navigation bar: * Change the dropdown span's border shape * Pick its background color * Set its padding * Adjust its shadow color * Customize dropdown text and icons * Define hover effects for the dropdown Refer to the **GIF** below for the visual demonstration: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/mainlarge-5_4yjr1w.gif) --- ## Toggle If you want to modify the hamburger menu in your website's navbar, which appears on mobile or tablet devices, you can easily do it from here. This option allows you to customize the menu's style according to your preferences. Also, you can enable the hamburger button for tabs if required. Refer to the screenshot below for the visual demonstration: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1f7oh8d.png) --- ## Settings and Background You can do more with your navigation with this option. These are: * Turn sticky navigation on/off * Change the sticky navigation's background color Refer to the screenshot below for the visual demonstration: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1h5to8i.png) --- # Common customization option of the Navigation element These are two other customized options available in the Navigation element. Which are on the **Style** & **Advanced** mode. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/mainlarge-6_thxrpz.gif) **Check the below documentations to learn more about it:** * [Styles tab in Editor](/en/article/styles-tab-in-editor-42a53c/) * [Advanced tab in Editor](/en/article/advanced-tab-in-editor-1y2imp1/) --- ## Related articles [Text / Paragraph](/en/article/text-paragraph-1brqk79/) [Regular Button](/en/article/regular-button-qfmqoa/)