Questions tagged [sidebar]
element that displays various forms of information to the side of an application or desktop user interface
103
questions
1
vote
3answers
96 views
How to handle 2 side navigation bars on a web app
I'm working on a web app that can briefly be described as the following. Every page has a table, and there's a primary side navigation bar that allows users to jump from one page (table) to another. ...
1
vote
1answer
59 views
Nested sidebar behavior
I have a nested sidebar that goes 3 levels deep. I would like the interaction to slide left/right:
So in this example, if you click on "Jobs" in (1), (2) would then slide in. My question is,...
0
votes
1answer
34 views
Expandable active filter list - user flow
I am trying to implement active filters list to a fixed side filter bar. When a user scrolls through data, they will always be able to preview the active filter list without having to scroll to the ...
0
votes
0answers
19 views
Dropdown in a Mobile Side Panel for Workspace Switching
I am designing a workspace switcher for mobile. It is a mobile web version that renders in the browser and is not an app. Workspaces are different spaces with the same set of settings and contents, ...
2
votes
2answers
76 views
How to implement a side filer bar for smaller screens without overlying the platform content
Currently, I'm working on a data-driven platform. I designed a side filter bar which allows user to filter data dependable of his needs. The problem appears on smaller screens. After a discussion with ...
1
vote
0answers
48 views
Is there a specific name for this type of navigation?
Currently, I'm working on a project that requires a lot of repeated navigational options.
For example:
System 1:
Transform;
Require;
Pipeline.
System 2:
Transform;
Require;
Pipeline.
System 3:
...
2
votes
2answers
66 views
Should we display Title of the Menu on the header even though user can see the menu title on the sidebar?
Do we still need to display the title on the header, if the title already can be seen on the sidebar like in the wireframe?
0
votes
2answers
90 views
When to hide a sidenav
I have in my app a sidenav which is by default visible. Now I got a feedback from users, that in lower resolutions (mobile, tablets) the sidenav covers a lot of space from the app. My question is: on ...
0
votes
6answers
987 views
Left Sidebar Menu design with hierarchy
Current scenario:
I've a webapp, in which there is a left sidebar. There are some menuItems and subMenuItems in sidebar. This hierarchy can go to N level.
New Requirement:
Now There can be multiple ...
0
votes
1answer
129 views
Why do most interfaces rely on sticky top bars instead of sidebars?
Most web interfaces have the classic sticky topbar + 2-3 columns layout (just like StackExchange).
Some but few websites use a different approach and, instead, have a collapsable sidebar (i.e. ...
2
votes
1answer
290 views
Is there a best practice for sidebar width on mobile?
What is the best practice when it comes to sidebars and user experience on mobile? Is it better to have one that is full-width or one that is 85% width with 15% backdrop? What are the benefits or ...
2
votes
1answer
477 views
Sidebar modal - pros & cons?
Do slide-out modals work well in your experience?
Our requirements are to present deeper, specific content to users without taking them out of a flow, so linking to another page is not being ...
0
votes
0answers
52 views
Combining two panes into a single one?
I am working on a UI design which has two left panes: the first shows the type of project that the user works on (i.e. custom web application, Shopify, Wordpress and so on)... the second needs to be a ...
0
votes
2answers
146 views
How to choose between a Popover, Inspector, or Toolbar to edit properties?
macOS apps have the following patterns (and possibly others) for editing properties of selected items:
Popovers (See here)
Inspector Panels (Right Sidebar)
Toolbars
In the following example, the ...
2
votes
2answers
516 views
Responsive nav sidebar with company logo and information
Currently, our team's browser app looks like this:
up to this point, we built our app to target desktop. However, because we're moving to Android, it is imperative that we can also effectively ...
1
vote
2answers
248 views
Best practice to best illustrate side navbar children
I have this Side Navbar with children. I am not sure that the way I am illustrating the children is the best way of doing this.
Questions - Is this the best way for me to illustrate navbar item's ...
0
votes
1answer
78 views
Select elements in the sidebar, which is better?
So, my friend and I are building a web app and we were having a little argument. We need to have two select elements in the sidebar and one of them is not relevant to a few pages. Which of the ...
1
vote
1answer
232 views
Menu sidebar height on small screen resolutions
I'm currently having a challenge on a SaaS I'm helping designing, regarding small screen sizes.
That SaaS has a menu sidebar on the left as its main navigation, with 2 levels of navigation.
The ...
3
votes
5answers
310 views
Only show a sidebar on some pages
In our application, we've got a dual sidebar design. On the far left is the main navigation sidebar, with all the top level pages. Next to this is a contextual sidebar, with links relevant to the page ...
3
votes
1answer
597 views
SaaS admin navigation through lower tiers
I'm working on a Saas platform that will provide its user with an SDK for their apps. Users will either be able to create multiple apps (tier 1) in their account or only one (tier 2). Within each app, ...
2
votes
2answers
118 views
How long should a swipe action be to open a sidebar?
How long/quick should a left or right movement be in order to indicate it's a swipe rather than user scrolling the page?
I was thinking, if user isn't scrolling in the y axis and performed touch ...
0
votes
6answers
1k views
Actions inside a dropdown
We need to allow a user to select a project as primary and quick action, he should also be able to add a new project, edit and delete projects (as secondary actions) this is all done in the faceted ...
1
vote
2answers
205 views
What problems exist with removing the navigation bar during the checkout process?
I am working on a application that allows users to buy games. There is a sidebar with the global navigation throughout the whole app.
And I am now wondering if I can hide the sidebar during the ...
0
votes
1answer
60 views
Is it ok not to place headers on pages?
Do I need a header on the top of every page I have or is a prominent indication of category in the sidebar enough? I keep jumping back and forth and cannot come up with a permanent solution. It also ...
0
votes
1answer
283 views
What should be the ratio of sidebar navigation to screen in ios?
I am working on designing a native iOS app. For one of the screen need to design a side navigation bar. Android navigation bar standard size details are available here - https://material.io/guidelines/...
0
votes
1answer
49 views
Navigation for dependent pages
I'm working on a location analysis dashboard. There are three main sections that are somewhat but not really related and somewhat but not really in a hierarchical system.
There's the main page. A ...
4
votes
2answers
1k views
Expand sibebar menu with a home button?
I need a way to user expand sidebar menu, but I can't remove the logo (links to home page) to put a sandwich button.
In the second screen I placed an arrow to the right when cursor is hovering the ...
0
votes
2answers
606 views
Are two sidebars good for a website design?
I am working on a website which is learning content based and I am planning to have two sidebars, one for the main navigation and other for the table of contents.
Is that okay to have two or three ...
2
votes
2answers
1k views
Is it ok to use Bottom Nav Bar with Tabs for sub-level?
I am trying to design and app with Material design which has 6 top level destinations and 4 of them have sub-levels.
Is it ok to use Bottom nav bar for 5 of them and put 6th one in side navs along ...
1
vote
1answer
289 views
How to show long navigation list horizontally?
We have a screen as below that has a long left navigation list that spans the whole height of the page and is scrollable (a lot of rows).
We also have an info panel that is basically tabular data. ...
2
votes
1answer
58 views
Floating sidebars of different widths under different modules of the same application
I'm designing a web application with multiple modules, and am using floating sidebars for new event creation. Currently, the sidebars have different widths since the number of form fields is ...
1
vote
2answers
180 views
Is it useful for users to have different UI of side menu in each page?
This is what I got today while navigationg agoda.com
Here you can see same content but different presentation.
Does this help user?
2
votes
2answers
116 views
UI: add buttons to Sidebar boxes
I've got a window with a sidebar divided into several Boxes.
The boxes have different controls, sometimes arranged into scrollable tables.
UI looks ok to my users. Clean and simple.
Now (the task) -...
2
votes
2answers
381 views
Validation in Slide Outs (desktop)
I have slide out with a bunch of filters.(sorry, because of private info I can't publish them) I can apply 1, 2 or 5 filters by clicking "Apply Filters".
By clicking on filter I can get to its ...
3
votes
3answers
950 views
Thin left sidebar instead of hamburger menu for mobile
I'm interested in designing a mobile-friendly search results page where users can refine their results. I'm thinking about using a left-hand sidebar with the filtering options similar to this Dribbble ...
3
votes
2answers
1k views
Minimalistic expandable / accordion menu button style
I'm trying to make a sidebar/panel to filter products and overall I use minimalist/flat design. Here is the layout, collapsed and expanded.
My problem is, as you can see, the accordion button (filter ...
3
votes
3answers
253 views
What to do with this “wasted” space in my side bar navigation mockup?
I am currently working on a new UI design for an existing desktop application. Being mobile/touch friendly is very important for this project, so I am replacing the tradition desktop "File" menu with ...
4
votes
1answer
233 views
Home link inside sidebar. Sidebar opens on click. Clicking home should open sidebar or home?
I have a page layout where the sidebar occupies the whole height. The sidebar is a list of different Project links, and the top element in the list is the Page Home link (a in this case).
The sidebar ...
8
votes
6answers
2k views
Should an opened sub-menu collapse when the user opens other sub-menu?
Take for example Google Material design website, that has big sub-menus in the sidebar's menu.
The sub menus are closed on page load.
Material design
Motion
Style
Layout
...
Clicking on a menu ...
2
votes
3answers
448 views
What is the best position for a submenu in a page with a sidebar?
I'm currently working on a project in which navigation positioning is key for the UX flow of the user. I've been trying several options, but I'm not sure I've found a solution that captivates the ...
2
votes
2answers
277 views
I need to justify why having two sidebars on the same side is wrong
Background
I have a right sidebar and a left sidebar, both are shown all the time, the right sidebar purpose is to change the background in the middle editing frame by selecting one of the options in ...
2
votes
2answers
123 views
How to fill up a side bar which only has a form with 3 fields?
So I have a page where left sidebar takes 25% and the actual thing takes up 75% on the right.
Basically a user would select something from the main app and fill out the form in the left side bar and ...
1
vote
2answers
132 views
Filtering list of items by folders
We're introducing folders into our app and I'm having a hard time figuring out the layout.
Here's what I know:
The items will be draggable onto the folders.
One item can be added into multiple ...
1
vote
3answers
738 views
Mobile ux: How to indicate the presence of side panel/drawer/sidebar
The company I work for has had a desktop website for ages, but recently I had the task to make a small mobile version with limited functionality. It's been online for a while now and I've been ...
2
votes
3answers
531 views
How to display two sidebars on mobile?
I got stuck with dealing making two sidebars for mobile screens. How I can make responsive to display nice on mobile? Maybe it's some pattern?
Thanks.
3
votes
2answers
2k views
When using a grid for a web app, does a sidebar /side tray fall within the grid or outside of it?
I have had this problem for a while. Designed many applications with a sidebar navigation but have never fully concluded on how to best use it within the grid.
A, inside the in grid
just included ...
2
votes
1answer
535 views
Material Design - bottom navigation with upper tabs?
Prototyping a new dialer app based on Material's framework and style guide.
Side navigation is not an option. Instead, I would like to use bottom navigation for 4 main pages/features.
Recent Calls
...
6
votes
1answer
189 views
RWD - Drag to background
I have the following setup for a responsive website.
download bmml source – Wireframes created with Balsamiq Mockups
The problem I'm running into is that on mobile devices, when the sidebar is ...
2
votes
1answer
687 views
Hide sidebar or show small side bar for web app
I am looking for feedback on the navigation structure for a web application.
In the application, we have:
A sidebar on the left where all the projects are listed
A list of views with all the tasks ...
3
votes
6answers
609 views
Contextual sidebar and consistency
I am designing a website service for coin collectors and have a question regarding navigation. The control flow is as follows:
User selects country (from map or an alphabetized list).
User selects a ...
