What can I do to improve the design of the tab component? (The one in the middle of the screen with "Overview", "Dependencies" and so on.

enter image description here

  • You should work on your information architecture. Card sorting or affinity mapping would help.
    – rahul_sann
    Commented Dec 15, 2023 at 9:39

1 Answer 1


There's any number of possible ways you could improve it, and ultimately depends one what you want the final product to look and behave like.

But how about some of these:

  1. Centre the text for the tab
    • This is particularly noticeable with the multi-line tabs
  2. A border between the tabs to help distinguish them apart from one another
  3. A slightly darker background colour for the selected one
    • This may not be needed as you have the thick underline, but sometimes it's also good to show the tab as if it were "pressed in" (like a button)
  4. Consistent use of an icon (or no icon)
    • What is the significance of the arrows icon for the "Dependencies" tab?
  5. Equal tab width
    • This may not always be possible (or necessary), but can highlight that each of the tabs are equally important.
    • An alternative to this is to widen all of the tabs and have them over a couple of lines, some people don't like this (or take it too far with 3+ rows of buttons)
    • You could instead put related items under one Dropdown menu (Bootstrap example)

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