{"id":1305,"date":"2021-06-21T09:29:26","date_gmt":"2021-06-21T09:29:26","guid":{"rendered":"https:\/\/pwa-for-wp.com\/docs\/?post_type=ht_kb&#038;p=1305"},"modified":"2021-08-25T11:09:40","modified_gmt":"2021-08-25T11:09:40","slug":"how-to-use-navigation-bar-for-pwa-addon","status":"publish","type":"ht_kb","link":"https:\/\/pwa-for-wp.com\/docs\/article\/how-to-use-navigation-bar-for-pwa-addon\/","title":{"rendered":"How to use Navigation Bar for PWA addon"},"content":{"rendered":"\n<p>Helping users navigate should be a high priority for almost every app. The easier your product is for people to use, the more likely they\u2019ll be to use it. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Visible and Well-Structured<\/strong> (Use three to five top-level destinations and avoid scrollable content in bottom navigation).<\/li><li><strong>Clear<\/strong> (Bar elements should be easy to scan and targets should be big enough to be easily tapped). <\/li><li><strong>Simple<\/strong> (Make sure that each navigation icon leads to the proper destination and use all elements, including bottom navigation, across your application consistently) for this follow the below steps.<\/li><\/ul>\n\n\n\n<p><strong>Step 1 \u2013&nbsp;<\/strong>First, you need to purchase and install <strong><strong><strong><a href=\"https:\/\/pwa-for-wp.com\/extensions\/navigation-bar-for-pwa\">Navigation Bar for PWA<\/a><\/strong><\/strong><\/strong> &nbsp;plugin.<\/p>\n\n\n\n<p>For more details on how to download an extension for this<strong>&nbsp;<a href=\"https:\/\/pwa-for-wp.com\/docs\/article\/how-to-download-an-extension\/\">Click Here<\/a><\/strong><\/p>\n\n\n\n<p><strong>Step 2 \u2013<\/strong>&nbsp;After Activate this plugin click on the Settings option like below the screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"172\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/16-1024x172.png\" alt=\"\" class=\"wp-image-1306\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/16-1024x172.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/16-300x50.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/16-768x129.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/16-50x8.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/16-60x10.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/16-100x17.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/16.png 1273w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Step 3 \u2013<\/strong>&nbsp;Once you click on settings links it will redirect to the Features option here enable the \u201c<strong><strong>Navigation Bar for PWA<\/strong><\/strong>\u201d option. Click on the \u201c<strong>gear<\/strong>\u201d icon like below the screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"584\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/17-1024x584.png\" alt=\"\" class=\"wp-image-1307\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/17-1024x584.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/17-300x171.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/17-768x438.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/17-50x29.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/17-60x34.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/17-100x57.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/17.png 1064w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Step 4 \u2013\u00a0<\/strong>Once you click on the gear icon you can see the\u00a0<strong>Navigation Bar<\/strong> settings page. After that, you can set these Text Font size, Text Font Color and Select Text Font Color\u00a0options like below the screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"476\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/08\/9-1024x476.png\" alt=\"\" class=\"wp-image-1351\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/08\/9-1024x476.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/08\/9-300x140.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/08\/9-768x357.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/08\/9-50x23.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/08\/9-60x28.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/08\/9-100x47.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/08\/9.png 1288w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Text Font size: <\/strong> In this field, you can change the Text Font Size of the Call TO Action button.<\/li><li><strong>Text Font color:<\/strong>  In this field, you can change the Text Font color of the Navigation Bar.<\/li><li><strong>Selected Text Font color: <\/strong>In this field, you can selected Text Font color of the Navigation Bar.<\/li><\/ul>\n\n\n\n<p><strong>Step 5: <\/strong>To create a navigation menu, you need to visit the\u00a0<strong>Appearance \u00bb Menus<\/strong>\u00a0page in your WordPress admin dashboard. The first thing you need to do is to give the menu a name, and then click\u00a0the\u00a0Create Menu\u00a0button. Any menu can make the Back button for this you need to check <strong>Use a back button<\/strong> option and <strong>Select icon name<\/strong> and then click\u00a0<strong>Save Menu<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"577\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/08\/11-1024x577.png\" alt=\"\" class=\"wp-image-1359\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/08\/11-1024x577.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/08\/11-300x169.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/08\/11-768x433.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/08\/11-50x28.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/08\/11-60x34.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/08\/11-100x56.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/08\/11.png 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>&nbsp;<strong>Step 6:<\/strong> Navigate to the&nbsp;<strong>Appearance<\/strong>&nbsp;-&gt;&nbsp;<strong>Menu<\/strong> -&gt; Check this <strong>PWA Navigation Menu<\/strong>&nbsp;option and then click&nbsp;<strong>Save Menu<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"812\" height=\"225\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/37-1.png\" alt=\"\" class=\"wp-image-1323\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/37-1.png 812w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/37-1-300x83.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/37-1-768x213.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/37-1-50x14.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/37-1-60x17.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/37-1-100x28.png 100w\" sizes=\"auto, (max-width: 812px) 100vw, 812px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">The Output of <strong>Navigation Bar for PWA<\/strong><\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"263\" height=\"538\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/photo_2021-06-21_14-54-59.jpg\" alt=\"\" class=\"wp-image-1311\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/photo_2021-06-21_14-54-59.jpg 263w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/photo_2021-06-21_14-54-59-147x300.jpg 147w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/photo_2021-06-21_14-54-59-24x50.jpg 24w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/photo_2021-06-21_14-54-59-29x60.jpg 29w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/photo_2021-06-21_14-54-59-49x100.jpg 49w\" sizes=\"auto, (max-width: 263px) 100vw, 263px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Note:<\/strong>&nbsp;For the upcoming update of the \u201c<strong><strong>Navigation Bar for PWA<\/strong><\/strong>&nbsp;\u201d plugin then you need to enter the license key for this you need to go&nbsp;<strong>WordPress Dashboard<\/strong>&nbsp;-&gt;&nbsp;<strong>PWA<\/strong>-&gt;&nbsp;<strong>Premium Features<\/strong>&nbsp;-&gt; In the \u201c<strong><strong>Navigation Bar for PWA<\/strong><\/strong>&nbsp;\u201d option enter the License key and click on \u201c<strong>Activate<\/strong>\u201d button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"798\" height=\"266\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/35-1.png\" alt=\"\" class=\"wp-image-1320\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/35-1.png 798w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/35-1-300x100.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/35-1-768x256.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/35-1-50x17.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/35-1-60x20.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2021\/06\/35-1-100x33.png 100w\" sizes=\"auto, (max-width: 798px) 100vw, 798px\" \/><\/figure>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope we\u2019ve clear your doubts in case If you have any feedback or questions, Just contact us&nbsp;<strong>here and<\/strong>&nbsp;we are always available for you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Helping users navigate should be a high priority for almost every app. The easier your product is for people to use, the more likely they\u2019ll be to use it. Visible and Well-Structured (Use three to five top-level destinations and avoid scrollable content in bottom navigation). Clear (Bar elements should be&#8230;<\/p>\n","protected":false},"author":3,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[9],"ht-kb-tag":[],"class_list":["post-1305","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-extension"],"_links":{"self":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/comments?post=1305"}],"version-history":[{"count":10,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1305\/revisions"}],"predecessor-version":[{"id":1361,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1305\/revisions\/1361"}],"wp:attachment":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/media?parent=1305"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=1305"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=1305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}