UI Navigation and Layout Redesign · GitLab Feature Trail

Aug 2026Making room for what's next in the GitLab UIThis post details the technical implementation of a design system evolution within the GitLab UI. Key changes include neutralizing actions and controls, enhancing instance theming, updating the neutral palette, and introducing a new bloom-style glow visual element for GitLab Duo interactions. The design philosophy shifts towards a quieter, more reductive UI to make room for intelligent, self-surfacing UI elements driven by AI.

Mar 2026Navigate repositories faster with the file tree browserIntroduced a file tree browser for repository navigation, offering a collapsible panel alongside file and directory views to maintain context. Features include synchronized tree expansion/highlighting, keyboard-first navigation (ARIA treeview pattern), filename filtering, responsive design across viewports, and pagination for large repositories.

Mar 2025Beautifying our UI: Enhancing GitLab's deployment experienceThis post details usability improvements in the continuous deployment area of GitLab, focusing on the 'Beautifying our UI' initiative. Key enhancements include a redesigned Environment List view to surface critical deployment information (status, trigger, commit, actions) directly, an improved deploy keys interface with a search field to quickly filter keys by name or SHA while maintaining pagination performance, and better Kubernetes agent management by simplifying registration with a clear 'Register an agent' CTA and separating the agent registration modal into distinct options (bootstrap with Flux or create via UI). Additional usability enhancements include Kubernetes pod search on the environment page, a 'stopped' badge for paused Flux reconciliations, clearer release information for deployments, streamlined environment search, and improved display of Flux error messages.

Aug 2023Bookmark these changes: URL structure updates coming in GitLab 17.0This post details specific URL structure updates for project and user settings pages, aiming for predictability and consistency. It announces the deprecation of old routes and their eventual removal in GitLab 17.0, providing tables of 'Current Path' vs. 'New Path' for various settings like Contributor statistics, Repository graph, Locked files, Alerts, Webhooks, Monitor settings, and all User settings sub-pages (Profile, Account, Applications, etc.). It also includes a feedback issue link for community input.

Aug 2023How we overhauled GitLab navigationThis post details the iterative process of overhauling GitLab's navigation based on user feedback and research. It describes the shift from validating proposed solutions to revalidating the underlying problems, studying user behavior through diary studies, and anchoring the redesign to three key themes: minimizing overwhelm, orienting users, and picking up where they left off. The post also covers user mental models for sidebar organization through card sorting studies, iterative design concept evaluation, and a phased launch with internal testing, an opt-in external launch, and ongoing surveys. Key improvements include task-based sidebar categories, the ability to pin items, and a more approachable interface, with ongoing iterations planned based on user feedback regarding pinning functionality, color contrast, and discoverability of new features.

Jul 2023Beautifying our UI: Giving GitLab build features a fresh lookThis post details UI improvements to the pipeline detail page and pipeline list view, including redesigning the pipeline header for better usability and scannability, and harmonizing badges and link styles on the pipeline list view. It also describes linking the runner number from the job detail page to the runner admin page and improving tooltips and button text for better readability and clarity. Technical challenges included refactoring HAML and Vue code to Vue/GraphQL for performance and maintainability.

Jun 2023How we improved accessibility in GitLab’s new navigationThis post details the iterative process of improving accessibility in GitLab's new navigation redesign. Key contributions include: early and frequent accessibility reviews using low-fidelity prototypes and ARIA attributes; manual testing with popular screen reader and browser combinations (JAWS/Chrome, NVDA/Firefox, VoiceOver/Safari/iOS); logging findings into an epic for prioritization and re-testing; implementing specific ARIA attributes like `aria-expanded`, `aria-controls`, and `aria-current='page'`; including a 'Skip to main content' link; and excluding navigation content from focus order when collapsed. It also highlights the successful adoption of the `inert` HTML attribute, enabled by browser vendor Interop efforts, to manage interactive content visibility and keyboard focus for collapsed navigation elements, improving maintainability and robustness.

May 2023How designing platform navigation is like building a dream homeThis post details the design process and user testing involved in overhauling GitLab's platform navigation. It outlines three key themes (minimize overwhelm, orient users, and easy pick-up-where-you-left-off) and explores five initial design concepts. User testing led to the selection of the 'Super Sidebar' layout, incorporating elements from the 'Element Reswizzle' concept. The post also describes the iterative process of refining the foundation, including context switching mechanisms, and highlights the ongoing nature of UI development.

May 2023Inside the vision for GitLab’s new platform navigationThis post details the vision and process behind GitLab's new navigation redesign. It emphasizes user research, establishing a 'north star' based on user feedback (minimize overwhelm, orient users, easy pickup), and a shift in iteration strategy to protect core workflows and avoid degrading user experience. The new navigation will be released with an on/off switch for gradual adoption. Future iterations will include customizable navigation, pins, and seamless integration with search and keyboard use.

Dec 2021Hey icons, lighten upThis post details the iteration on GitLab's product icons, specifically focusing on reducing the stroke weight from 2 pixels to 1.5 pixels. This change aims to improve icon fidelity, balance visual weight with system fonts, enhance clarity for users with visual impairments, mitigate the 'bleeding' effect in dark UIs, address concerns about display resolution, increase consistency with marketing iconography, and streamline asset creation by leveraging Figma's boolean unions and reusable components. The post also notes the UI feeling 'lighter and more modern' as a subjective outcome.

Oct 2021Why we built GitDock, our desktop app to navigate your GitLab activitiesThis post introduces GitDock, a desktop application developed as a Minimum Viable Change (MVC) to explore user-centric navigation patterns for GitLab activities. It details the motivation behind GitDock, stemming from the limitations of the current project-centric navigation model and UX research findings. The post describes GitDock's features, including access to recent pipelines, viewed objects, favorite projects, recent comments, and bookmarks, as well as system notifications. It explains the decision to build GitDock as a separate product for faster iteration and testing of new ideas, acknowledging its use of shortcuts and less optimized API calls. The post also outlines the next steps, which involve using learnings from GitDock to build a better start page for GitLab.

May 2021Using web components to encapsulate CSS and resolve design system conflictsThis post details the use of web component technologies (Shadow DOM, templates, slots, custom elements) to achieve CSS encapsulation and incrementally adopt the Slippers design system on the GitLab blog. It describes the technical implementation of using a template tag, loading JavaScript to inject encapsulated CSS, and using slots for rendering non-Slippers items. The solution addresses the challenge of conflicting CSS between the new design system (Tailwind CSS with Preflight) and existing legacy styles.

Mar 2021Why design systems benefit everyoneThis post details the technical implementation of the Slippers design system, including the use of Figma for design assets, the creation of core elements (type, color, spacing), and the refactoring of existing pages (homepage, enterprise, pricing, blog) as a proof of concept. It emphasizes the importance of a coded repo reflecting design assets and the value of a shared language between design and engineering for scalability and maintainability.

Feb 2021Measuring the value of our design systemThis post details the impact of the Pajamas design system on designer efficiency, showing improvements in usefulness, reduction in component styling/usage questions, and increased time for brainstorming user problems. It quantifies these improvements through survey data and themes, highlighting the design system's role in supporting evolving workflows and enabling faster iteration.

Jun 202013.0 Contributor Experience UpdateThis post details updates to the Pajamas Design System, including semantic releases, conventional commits, and an updated component status table. It also covers usage guidelines for Progress Bars, File Uploaders, button positioning in alerts, and banner dismissal. GitLab UI saw the introduction of UX Reviewers and the foundation for using GitLab UI in Docs. Component updates include markdown typescale, removal of documentation links from scoped labels, standardized alert styling, addition of filters, dropdown style fixes, and the introduction of a loading button. Figma migration saw new components added and the deprecation of the Sketch UI Kit. Icons and illustrations were moved to GitLab SVGs, with new icons added for Project, group, and subgroup, Expire, and Container image. GDK updates include GDK doctor checks for Ruby gems, a new quiet mode for bundle installation, restructured documentation, YARD documentation generation, Webpack modes, and Grafana configuration. CI improvements include shell script checks, Vale for documentation linting, RuboCop for Ruby code, CI config split into templates, and interruptible CI jobs by default.

May 2020How we created a dark UI for GitLab's Web IDEThis post details the technical implementation of a dark mode for the GitLab Web IDE. It describes the design process, including the distinction between UI and themes, the use of Figma for asynchronous collaboration, and the challenges encountered in adapting UI elements for dark mode. Specific design considerations for stateful elements, visual hierarchy, depth, graphics, and illustrations are discussed. The post also outlines the iterative approach to shipping the feature in small pieces, starting with the code area and progressively styling the rest of the UI, emphasizing the Minimal Viable Change (MVC) philosophy. It highlights effective prototyping techniques for elements with multiple states.

Dec 2019GitLab Iconography: MVC meets visual designThis post details the iterative process of updating GitLab's iconography using an MVC approach. It outlines the establishment of new iconography documentation and guidelines, including requirements for clear meaning, SVG optimization, minor visual changes, metaphor validation, categorized Sketch assets, and deprecation of unused icons. It also discusses technical constraints such as the 16x16 pixel grid and 2-pixel stroke weight, and the process of batch updates, async reviews, and merge requests for SVG library integration. The post highlights early results like improved feature recognition and the development of tools for auditing and previewing icons.

Jul 2019Quantifying UX: Positioning the clone buttonThis post details the use of UX research, specifically click tests, to quantitatively validate UI design decisions. It describes experiments to determine the optimal placement of the 'clone' button on the project overview page, comparing header placement with placement near the file tree. The research demonstrated that placing the button near the file tree improved discoverability and reduced the time to find it. It also addressed the scenario of empty repositories, leading to the addition of a clone button within the instructions section.

Jul 2019What we're doing to beautify our UIThis post details the initial efforts to "beautify" GitLab's UI, focusing on tactical fixes and the beginnings of a design system. Specific improvements include a new threaded discussion design using subtle background colors, prioritized merge request "changes" tab display across breakpoints, and aligned merge request icons. The post also announces the hiring of a senior product designer focused on visual design and the ongoing development of the Pajamas design system.

Mar 2019Quantifying UX: How we validated the redesign of GitLab's settings pagesThis post details the validation of UI and Information Architecture (IA) changes to GitLab's settings pages. It describes the methodology of using Usability Hub click tests to compare the original design with a redesigned concept. The validation focused on assumptions related to task completion time, accuracy, user confidence, and perceived difficulty. The results showed significant improvements in task accuracy and perceived difficulty, validating three out of four success criteria, despite a slight increase in task completion time for some tasks. This data-driven approach informed the decision to apply similar redesigns to other settings pages.

Nov 2018Help us shape the future of design discussion in GitLabThis post identifies challenges in design discussions within GitLab issues, specifically the difficulty in following lengthy conversations and multiple design iterations. It also highlights the need for version control for design files, noting that current Sketch files are not version-controlled within the repository, leading to designers maintaining personal work-in-progress folders. A competitive analysis of design platforms is presented, identifying key requirements for design tools: improving UX consistency, enabling research and testing, clarifying requirements, facilitating collaboration, version control, minimizing duplication, and minimizing context switching. The post proposes areas of opportunity for GitLab, including review and collaboration, interaction design, version control, developer handoff, and design system management. It suggests starting with improving discussion within issues by making design artifacts a first-class citizen, linking to design assets in the side navigation of an issue, and allowing for commenting on images with propagated comments in the sidebar.

Mar 2018Polishing GitLab’s UI: A new color systemThis post details the technical implementation of a new color system for GitLab's UI. It addresses issues with the previous palette, including lack of brand extension, too many similar colors, and insufficient contrast. The new palette was built by extending brand colors, selecting only necessary hues, and ensuring WCAG compliance. It introduces a color priority system (1-4) to guide usage, similar to font weights, with colors named from 50 (lightest) to 950 (darkest). The post also discusses the decision to target AA for large text contrast as a minimum, even for small text, and the challenges encountered with green and orange backgrounds.

Feb 2018How eslint-plugin-vue improved our code reviewsThis post details the successful integration of eslint-plugin-vue into the GitLab codebase to enforce consistent Vue.js code style. It describes the initial lack of linting when Vue was first introduced, the subsequent development of an internal style guide, and the eventual adoption of the official eslint-plugin-vue. The post highlights the team effort required to resolve linting conflicts and the resulting improvement in code review efficiency by automating style guide checks.

Dec 2017Scaling design: The start of system thinkingThis post details the initial steps in establishing a design system by creating a pattern library of reusable components. It emphasizes treating design as a language for consistency and introduces the concept of auditing current design inconsistencies (e.g., 82 gray values, 30 type scales) as a starting point. The post outlines the process of defining perceptual patterns (typography, colors, measurement system) and applying them to components using Atomic Design principles (atoms, molecules, organisms). It also discusses tooling considerations, specifically evaluating Brand.ai and Sketch's library feature, and highlights the importance of the design library as the first part of a larger design system goal, with future plans to link the design library with frontend code.

Dec 2017Inside GitLab: Illustrations and icons on GitLab.comThis post details the technical and design process behind replacing Font Awesome with a custom SVG-based icon system and developing a new series of illustrations for GitLab.com. It covers defining a consistent visual style by adjusting color palettes, ensuring brand consistency between the product and website, and reflecting GitLab's values of playfulness, delight, and inclusivity. The technical implementation involves creating SVG files, managing them in a dedicated repository (GitLab SVGs), and optimizing them for use as SVG sprites and illustrations. The post also highlights the accessibility considerations for icon design (thick borders) and the benefits of using SVGs for streamlined processes.

Nov 2017How we do Vue: one year laterThis post details GitLab's experience with Vue.js one year after its initial adoption. It emphasizes the benefits of using VueX for state management in medium to large features, the importance of writing high-quality, maintainable, and performant Vue code by following a style guide and adhering to Flux architecture principles. It also strongly advises against using jQuery with Vue.js, advocating for server-side data provision and client-side store management instead. Performance improvements were achieved by refactoring issue comments from Haml/jQuery/Rails to Vue.js, addressing issues with event listeners and asynchronous loading.

Sep 2017Unveiling GitLab's new navigationThis post details the technical implementation of several UI navigation improvements: a collapsible sidebar with icons, a flyout menu for sub-page access, dropdown links in the top bar for quicker project access, and improved breadcrumbs with chevrons and ellipsis for subgroups. It also covers header height reduction and redesign of active/hover/dropdown styles, including notification badges. The post highlights user feedback driving these iterations and mentions upcoming efforts in color palettes, type ramps, and iconography.

Jul 2017Redesigning GitLab's navigationThis post details the technical implementation of a UI navigation redesign based on user research and testing. It introduces a new global navigation bar and breadcrumbs to improve user orientation and access to global content. The design decisions were informed by user testing to differentiate between global and contextual content. Future iterations are planned for collapsible sidebars, fly-out dropdowns, and mobile responsiveness.

Oct 2016GitLab UX updateThis post details several UX design improvements for GitLab, including better empty states to guide users and celebrate accomplishments, a streamlined approach to filtering and searching by combining controls into a single powerful flow, and the introduction of time tracking for issues using slash commands. It also highlights advancements in Cycle Analytics by breaking down stages into specific events and refinements to the Review Apps experience with the ability to stop apps and group environments. Future work on settings pages and burndown charts is also mentioned.

Jun 2016Navigation redesignThis post details the iterative process of redesigning GitLab's UI navigation. It describes the initial attempt to integrate project navigation into the dashboard, which failed user testing due to increased confusion. The team then adopted a new approach, separating global navigation (dark, static left sidebar) from contextual navigation (dynamic header and content area). This new paradigm was first applied to profile and group pages, and later planned for project pages. Mobile improvements were also made by hiding the sidebar by default. The post highlights the importance of user feedback and iterative development in UI/UX design.

Nov 2015Feature Highlight: User preferences to customize GitLab behaviorThis post introduces user preferences in GitLab 8.1 that allow users to customize their experience. Specifically, it adds options for 'Layout width' (fluid or fixed) and 'Default Dashboard' (Your Projects, Starred Projects, Your Projects' Activity, Starred Projects' Activity). It also highlights the existing 'Project view' preference (Readme or Activity). These features aim to tailor the UI to individual user needs and workflows.

Jan 2015Pragmatic Redesign for GitLabThis post details the initial redesign of GitLab's UI navigation to address specific usability problems: limited project navigation space, stacked navigation levels, top-heavy navigation, lack of icon space, and complex settings pages. It describes the prototyping process using browser web inspectors, community feedback gathering via Twitter and a staging server, and the incorporation of contributor merge requests. The final design moved navigation to the side, introduced responsive icon-only states, and eliminated the third navigation level.

What this trail covers