How we dropdown

GitLab 8.6 is a massive release for the front-end. It includes a lot of improvements that make GitLab look amazing!

Out with the old

The old dropdown's looked out of place with the rest of GitLab. It was a mix of Bootstrap dropdown's and select2 dropdown's that made the experience inconsistent.

This is how the Bootstrap dropdown's were styled.

And this is how the select2 dropdown's looked.

Not great.

In with the new

The new dropdown's don't just look amazing they function so much better!

Looking at filters - all data is loaded in asynchronously to aid in the first page load speed. The style is consistent between not just Bootstrap dropdown's but the new mega-dropdown's.

The Bootstrap dropdown's have had a lick of paint.

Our mega-dropdown's just look amazing. They are extensible to the point where anything can be done in them. It is even possible to include a second page like our labels dropdown.

Open source

GitLab has got to the best open source project. We work in the open so that you can see exactly what is happening in GitLab.

The new dropdown's were built in the open for everyone to follow along and was done in steps.

Step 1

Update Bootstrap's dropdown CSS.

Step 2

Create new CSS for the improved dropdown's.

Step 3

Create new dropdown JS.


To save breaking everything at once - these are getting rolled out slowly. So we are still running select2 in places.

Feel like you can improve it? Submit a merge request!