{"id":5095,"date":"2020-07-15T11:51:00","date_gmt":"2020-07-15T11:51:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5095"},"modified":"2020-08-21T12:17:30","modified_gmt":"2020-08-21T12:17:30","slug":"top-11-inspiring-website-sidebar-design-example-in-2020","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/inspiration\/top-11-inspiring-website-sidebar-design-example-in-2020\/","title":{"rendered":"Top 11 Inspiring Website Sidebar Design Example in 2020"},"content":{"rendered":"\n<p>A good website layout can increase the chances of creating a successful website. For this reason, website designers pay a lot of attention to website elements such as\u00a0footer, header, the body as well as the navigation bar.<\/p>\n\n\n\n<p>This article is dedicated to showcasing one of the website key elements &#8211; the website sidebar. You can get inspired from the top 30 creative website sidebar designs.<\/p>\n\n\n\n<h2><strong>Why do you need a website sidebar<\/strong>?<\/h2>\n\n\n\n<p>A website sidebar is a unique, creative, and useful component of website navigation design. In most cases it is a column with typography, color palette, or icons and appears by the side of the main content &#8211; either on the left or on the right, depending on the website layout and structure.<\/p>\n\n\n\n<p>Normally, sidebars on the left gain the most attention and guide the users more effectively because of visual habit and user behavior, while sidebars on the right can create a more constructive hierarchy because they are considered secondary. No matter where it is placed, a proper sidebar can be very useful to your website as it can:<\/p>\n\n\n\n<ul><li>Contain navigation menus to quickly guide the visitors<\/li><li>Highlight key information, such as ads, contact form, or recent news<\/li><li>Further, define website engagement and sections<\/li><\/ul>\n\n\n\n<h4>Below are <strong>11 inspiring and creative website sidebar design examples<\/strong>:<\/h4>\n\n\n\n<h3><strong>01. Pedro n The World<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5096\" data-permalink=\"https:\/\/azoora.com\/blog\/inspiration\/top-11-inspiring-website-sidebar-design-example-in-2020\/attachment\/01-pedron-the-world\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/01.Pedron-the-world.png\" data-orig-size=\"2494,1330\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"01.Pedron-the-world\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/01.Pedron-the-world-300x160.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/01.Pedron-the-world-1024x546.png\" loading=\"lazy\" width=\"1024\" height=\"546\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/01.Pedron-the-world-1024x546.png\" alt=\"\" class=\"wp-image-5096\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/01.Pedron-the-world-1024x546.png 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/01.Pedron-the-world-300x160.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/01.Pedron-the-world-768x410.png 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/01.Pedron-the-world-1400x747.png 1400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.pedrontheworld.photo\/\" target=\"_blank\"><strong>Pedro n The World<\/strong><\/a>\u00a0is a one-page website. It has a menu bar in the center of the interface. The navigation is displayed on the left in all the other detail pages, with the logo on top.<\/p>\n\n\n\n<h3>02. <strong>Wiggs Photo<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5097\" data-permalink=\"https:\/\/azoora.com\/blog\/inspiration\/top-11-inspiring-website-sidebar-design-example-in-2020\/attachment\/02-wiggs-photo\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/02.Wiggs-Photo.png\" data-orig-size=\"2520,1258\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"02.Wiggs-Photo\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/02.Wiggs-Photo-300x150.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/02.Wiggs-Photo-1024x511.png\" loading=\"lazy\" width=\"1024\" height=\"511\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/02.Wiggs-Photo-1024x511.png\" alt=\"\" class=\"wp-image-5097\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/02.Wiggs-Photo-1024x511.png 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/02.Wiggs-Photo-300x150.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/02.Wiggs-Photo-768x383.png 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/02.Wiggs-Photo-1400x699.png 1400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.wiggsphoto.com\/\" target=\"_blank\"><strong>Wiggs Photo<\/strong><\/a>\u00a0is a commercial photography website which deals with architecture, interiors, and product photography. The navigation menu has a logo and the text highlighted in yellow color.<\/p>\n\n\n\n<h3>03. <strong>Intechnic<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5098\" data-permalink=\"https:\/\/azoora.com\/blog\/inspiration\/top-11-inspiring-website-sidebar-design-example-in-2020\/attachment\/03-intechnic\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/03.Intechnic.png\" data-orig-size=\"2510,1410\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"03.Intechnic\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/03.Intechnic-300x169.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/03.Intechnic-1024x575.png\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/03.Intechnic-1024x575.png\" alt=\"\" class=\"wp-image-5098\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/03.Intechnic-1024x575.png 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/03.Intechnic-300x169.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/03.Intechnic-768x431.png 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/03.Intechnic-1400x786.png 1400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong><a rel=\"noreferrer noopener\" href=\"https:\/\/www.intechnic.com\/\" target=\"_blank\">Intechnic<\/a>\u00a0<\/strong>is a studio that designs high-performance websites, apps, and software. It has a hidden sidebar.<\/p>\n\n\n\n<h3><strong>04. Dylan Perlot<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5099\" data-permalink=\"https:\/\/azoora.com\/blog\/inspiration\/top-11-inspiring-website-sidebar-design-example-in-2020\/attachment\/04-dylan-perlot\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/04.Dylan-Perlot.png\" data-orig-size=\"2512,1162\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"04.Dylan-Perlot\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/04.Dylan-Perlot-300x139.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/04.Dylan-Perlot-1024x474.png\" loading=\"lazy\" width=\"1024\" height=\"474\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/04.Dylan-Perlot-1024x474.png\" alt=\"\" class=\"wp-image-5099\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/04.Dylan-Perlot-1024x474.png 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/04.Dylan-Perlot-300x139.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/04.Dylan-Perlot-768x355.png 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/04.Dylan-Perlot-1400x648.png 1400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong><a rel=\"noreferrer noopener\" href=\"https:\/\/www.dylanperlot.com\/\" target=\"_blank\">Dylan Perlot<\/a>\u00a0<\/strong>showcases many fashion photography projects. Its sidebar is on the left to help visitors. In addition, there are drop-down menus to provide in-depth navigation.<\/p>\n\n\n\n<h3>05. <strong>Niche Pod<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5100\" data-permalink=\"https:\/\/azoora.com\/blog\/inspiration\/top-11-inspiring-website-sidebar-design-example-in-2020\/attachment\/05-niche-pod\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/05.Niche-Pod.gif\" data-orig-size=\"1190,577\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"05.Niche-Pod\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/05.Niche-Pod-300x145.gif\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/05.Niche-Pod-1024x497.gif\" loading=\"lazy\" width=\"1024\" height=\"497\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/05.Niche-Pod-1024x497.gif\" alt=\"\" class=\"wp-image-5100\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/05.Niche-Pod-1024x497.gif 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/05.Niche-Pod-300x145.gif 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/05.Niche-Pod-768x372.gif 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"http:\/\/www.nichepod.com\/\" target=\"_blank\"><strong>Niche Pod<\/strong><\/a>\u00a0has a hidden sidebar. It consists of the logo, welcome greetings and links to help visitors explore the website.<\/p>\n\n\n\n<h3>06<strong>. Charlie Waite<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5101\" data-permalink=\"https:\/\/azoora.com\/blog\/inspiration\/top-11-inspiring-website-sidebar-design-example-in-2020\/attachment\/06-charlie-waite\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/06.Charlie-Waite.png\" data-orig-size=\"2524,1338\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"06.Charlie-Waite\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/06.Charlie-Waite-300x159.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/06.Charlie-Waite-1024x543.png\" loading=\"lazy\" width=\"1024\" height=\"543\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/06.Charlie-Waite-1024x543.png\" alt=\"\" class=\"wp-image-5101\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/06.Charlie-Waite-1024x543.png 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/06.Charlie-Waite-300x159.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/06.Charlie-Waite-768x407.png 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/06.Charlie-Waite-1400x742.png 1400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"http:\/\/www.charliewaite.me\/\" target=\"_blank\"><strong>Charlie Waite<\/strong><\/a>\u00a0is a personal website created by the designer Charlie Waite. He uses a big sidebar to introduce himself and greet the website visitors. It also displays links to his social media pages.<\/p>\n\n\n\n<h3><strong>07. Mathieu Stern<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5102\" data-permalink=\"https:\/\/azoora.com\/blog\/inspiration\/top-11-inspiring-website-sidebar-design-example-in-2020\/attachment\/07-mathieu-stern\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/07.Mathieu-Stern.png\" data-orig-size=\"2504,1424\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"07.Mathieu-Stern\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/07.Mathieu-Stern-300x171.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/07.Mathieu-Stern-1024x582.png\" loading=\"lazy\" width=\"1024\" height=\"582\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/07.Mathieu-Stern-1024x582.png\" alt=\"\" class=\"wp-image-5102\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/07.Mathieu-Stern-1024x582.png 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/07.Mathieu-Stern-300x171.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/07.Mathieu-Stern-768x437.png 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/07.Mathieu-Stern-1400x796.png 1400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.mathieustern.com\/\" target=\"_blank\"><strong>Mathieu Stern<\/strong><\/a>\u00a0is a website for photography and films. Its sidebar has a two-tier structure, which is very helpful for visitors to explore the site.<\/p>\n\n\n\n<h3>0<strong>8. Mike Kelley<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5103\" data-permalink=\"https:\/\/azoora.com\/blog\/inspiration\/top-11-inspiring-website-sidebar-design-example-in-2020\/attachment\/08-mikekelley\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/08.Mikekelley.png\" data-orig-size=\"2510,1252\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"08.Mikekelley\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/08.Mikekelley-300x150.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/08.Mikekelley-1024x511.png\" loading=\"lazy\" width=\"1024\" height=\"511\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/08.Mikekelley-1024x511.png\" alt=\"\" class=\"wp-image-5103\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/08.Mikekelley-1024x511.png 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/08.Mikekelley-300x150.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/08.Mikekelley-768x383.png 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/08.Mikekelley-1400x698.png 1400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.mpkelley.com\/\" target=\"_blank\"><strong>Mike Kelley<\/strong><\/a>\u00a0is a personal website owned by a photographer named Mike. His website features a beautiful hero image and vertical navigation bar, which has a cool logo and overlay effects.<\/p>\n\n\n\n<h3>09<strong>. Jasmine Star<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5104\" data-permalink=\"https:\/\/azoora.com\/blog\/inspiration\/top-11-inspiring-website-sidebar-design-example-in-2020\/attachment\/09-jasmine-star\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/09.Jasmine-Star.png\" data-orig-size=\"2418,1334\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"09.Jasmine-Star\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/09.Jasmine-Star-300x166.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/09.Jasmine-Star-1024x565.png\" loading=\"lazy\" width=\"1024\" height=\"565\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/09.Jasmine-Star-1024x565.png\" alt=\"\" class=\"wp-image-5104\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/09.Jasmine-Star-1024x565.png 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/09.Jasmine-Star-300x166.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/09.Jasmine-Star-768x424.png 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/09.Jasmine-Star-1400x772.png 1400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/jasminestar.com\/\" target=\"_blank\"><strong>Jasmine Star<\/strong><\/a>\u00a0is a website that empowers entrepreneurs to build successful brands. Its sidebar for navigation is on the left. The position of typography on the sidebar is special. The white background helps in highlighting the sidebar. Besides, \u00a0there is an option to close it.<\/p>\n\n\n\n<h3>10<strong>. Grace Chuang<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5105\" data-permalink=\"https:\/\/azoora.com\/blog\/inspiration\/top-11-inspiring-website-sidebar-design-example-in-2020\/attachment\/10-grace-chuang\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/10.Grace-Chuang.png\" data-orig-size=\"2520,1334\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"10.Grace-Chuang\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/10.Grace-Chuang-300x159.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/10.Grace-Chuang-1024x542.png\" loading=\"lazy\" width=\"1024\" height=\"542\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/10.Grace-Chuang-1024x542.png\" alt=\"\" class=\"wp-image-5105\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/10.Grace-Chuang-1024x542.png 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/10.Grace-Chuang-300x159.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/10.Grace-Chuang-768x407.png 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/10.Grace-Chuang-1400x741.png 1400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.gracechuang.me\/\" target=\"_blank\"><strong>Grace Chuang<\/strong><\/a>\u00a0is a portfolio website that showcases the projects of Grace. This site features a 3-column layout: on the left is the sidebar with the logo, links to guide the visitor to other pages on the website, and links to social media pages at the center is the photo of the designer, and on the right is the designer&#8217;s introduction.<\/p>\n\n\n\n<h3>11<strong>. Dollyave<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5106\" data-permalink=\"https:\/\/azoora.com\/blog\/inspiration\/top-11-inspiring-website-sidebar-design-example-in-2020\/attachment\/11-dollyave\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/11.Dollyave.png\" data-orig-size=\"2540,1344\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"11.Dollyave\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/11.Dollyave-300x159.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/11.Dollyave-1024x542.png\" loading=\"lazy\" width=\"1024\" height=\"542\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/11.Dollyave-1024x542.png\" alt=\"\" class=\"wp-image-5106\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/11.Dollyave-1024x542.png 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/11.Dollyave-300x159.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/11.Dollyave-768x406.png 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/11.Dollyave-1400x741.png 1400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"http:\/\/www.dollyave.com\/\" target=\"_blank\"><strong>Dollyave<\/strong><\/a>\u00a0is a website related to photos and music. The sidebar uses bold typography, which works perfectly with all the other elements. It is not only visually appealing but can also help visitors to explore the website easily.<\/p>\n\n\n\n<h2><strong>How to create a sidebar menu?<\/strong><\/h2>\n\n\n\n<p>Sidebars play an important role in websites, but designing a good sidebar is not an easy task. There are many\u00a0principles of website navigation menu design\u00a0and other necessary factors you should take into consideration.<\/p>\n\n\n\n<p>This is a <strong>YouTube <\/strong>video that teaches you how to create a sidebar using HTML, CSS, and jQuery.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-rich is-provider-embed-handler wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe class='youtube-player' width='960' height='540' src='https:\/\/www.youtube.com\/embed\/zPh0RbYiYGg?wmode=transparent&#038;version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2' allowfullscreen='true' style='border:0;' sandbox='allow-scripts allow-same-origin allow-popups allow-presentation'><\/iframe><\/span>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A good website layout can increase the chances of creating a successful website. For this reason, website designers pay a lot of attention to website elements such as\u00a0footer, header, the body as well as the navigation bar. This article is dedicated to showcasing one of the website key elements &#8211; the website sidebar. You can [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":5101,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[85,81,168],"tags":[86,82,203,106],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/06.Charlie-Waite.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1kb","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5095"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=5095"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5095\/revisions"}],"predecessor-version":[{"id":5107,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5095\/revisions\/5107"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/5101"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=5095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=5095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=5095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}