1

I'm building a UI with a side panel for navigation links. The content of the page would have a max-width while the sidebar stays fixed when scrolling the content. I'm not sure where to place the sidebar for widescreen displays.

Apps like Notion seem to pin it to the edge of the window regardless of the window width (image A below).

The WCAG site instead includes it within its content's max-width. I like how it makes the entire UI accessible within a reasonable width. It seems to work well for the WCAG site, since the sidebar looks like it's part of the content itself, and also scrolls with the content.

But in my case, the sidebar spans the entire height of the window and stays fixed when scrolling the content, so I'm not sure if it'll look like an awkward ribbon on the screen if I go with option B.example UIs for the two sidebar styles mentioned

3
  • Is this a sidebar, or it is more of a navbar? Will it allow the users to navigate within the page or it is a global navigation?
    – Adriano
    Oct 1 at 5:03
  • A looks best, but I should vote for C. All left aligned and a bigger white space to the right.
    – sibert
    Oct 1 at 5:30
  • @Adriano it's for global navigation. Each item in it will be used to navigate to a new page. Kinda like Notion, where each item opens a new document, or a code editor where each item opens a new file.
    – glocore
    Oct 1 at 7:04
5

It's not possible to choose an option without knowing what the real content of the page is. Other options to consider:

C – Responsive content

The sidebar on the left and the responsive content occupying the screen width. Example di.fm

enter image description here

D – Fake sidebar width

The content with the max-width centered on the screen and the sidebar background to the left limit

enter image description here

E – Sidebar with responsive content

Example ShinyDashboard

enter image description here

0

It really depends on what your content is and why you really need your sidebar to work the way you described. Without the full context, I would still recommend thinking about standardizing your design by viewport. Try coming up with the most optimal solution for mobile, tablet, desktop, XL, XXL screens and use containers to control anything outside of it. Think about each size as it's own experience and do what is best for each.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.