A dark blue icon of a paper airplane inside a circle, representing the new navigation features in CodeGrade's coding assessment platform.
July 22, 2025

New Navigation in CodeGrade!

In 30 seconds...

Get ready for a smoother, faster, and more intuitive CodeGrade experience! We're thrilled to announce our new navigation, launching this summer, designed to modernize the application, boost performance, and enhance the overall look and feel. Discover what's changing and how it will streamline your workflow.

We're excited to announce New Navigation within the CodeGrade application, which will launch this summer!

New Navigation does the following:

  1. Modernizes CodeGrade’s navigation
  2. Enhances performance
  3. Improves the overall look and feel

This update introduces new designs and navigation patterns to streamline your experience.

So, what’s changed?

The new navigation framework

Left sidebar

The sidebar's role has been refined. Previously, it was heavily used for navigating the app and within entities. Now, it serves primarily to access the profile page. Navigation to courses and assignments no longer occurs through the sidebar.

Breadcrumbs

Every page now features a hierarchical breadcrumb trail at the top, clearly showing your current location within the app.

Clicking any part of the breadcrumb (except the final entry) will navigate you back to that page.

The final item in the breadcrumb is a dropdown menu. The top section of this dropdown provides actions for the current page or links to related locations. The bottom section allows you to navigate to other items at the same level, such as switching between submissions from different users.

Page menu

Located on the right-hand side of the screen, the Page Menu is your primary tool for navigating within a page. 

The top section contains page categories, replacing the previous category selector in the page header. Some categories can be expanded for more granular navigation.

The bottom section contains links to related or external entities. 

Action buttons

To improve clarity, we are moving away from buttons that contain only icons. In their place, we are introducing a new "Actions" button. This dropdown menu contains less frequently used options, with each action clearly described in words. When positioned next to a primary action like "Edit," the menu will also include that primary action.

Want seamless management for your coding course? Find out how!

Updated Page Designs

Home

The Home Page has been completely redesigned to show a streamlined list of courses and their metadata, replacing the previous view that showed assignments for every course. Clicking on a course takes you to its home page. Searching on this page is now significantly faster.

Course home

This is a new page that serves as the home for a specific course. It displays a searchable list of the course's assignments and their metadata. For each assignment, you can see information like "Availability" and "Grades" status, and a direct link to that assignment's settings. The Page Menu for this view allows for high-level course navigation between "Assignments" and "Course Settings."

Course settings

The navigation on the Course Settings page has been updated, but the page's content and functionality are unchanged. The Page Menu on the right now organizes all settings into clear categories. The "Mail course participants" option has been moved into the page's Actions menu to reduce clutter.

Assignment home page

On this page, the submission table has been reimplemented, while most other components have received styling updates.

The rubric progress meter has been removed as it was confusing for users. 

The ability to export only the submissions that match your current filters has been removed.

Assignment Settings

The Assignment Settings now uses the page menu, making it easier to navigate between settings. All functionality has remained the same.

Submission page

This page, for viewing an individual student's submission, now demonstrates how the Page Menu can be expanded for deeper navigation. The Actions menu pattern is used in the page header to clearly describe different options instead of relying on icons. On smaller screens, the file tree now remains on the side and can be collapsed by the user, rather than moving underneath the code view.

Code editor

The Code Editor's design has been updated, but its functionality remains the same. The Page Menu on the right organizes the view into "Editor Sessions" and "Files," where you can browse the file tree. A key change is that in the collapsed sidebar view, the "Hand in" button now remains within the sidebar at all times, and the sidebar is shown when hovering over the right-hand side of the screen.

API changes

The most significant change to our API is the introduction of cursor-based pagination for almost all routes that return lists of data.

Instead of returning all data in a single request, the API now returns a portion of the data along with a token to retrieve the next portion.

For those using our Python API library, this change is fully transparent. The library handles the pagination automatically, and you can iterate over results as you normally would.

New Navigation will go live in early August, we will let you know when it’s ready for you to view.

Let us know what you think of this new navigation by contacting support@codegrade.com!

Continue reading

Automatically deduct late penalties in CodeGrade

Learn how to set up automatic penalties for late submissions in CodeGrade, making your grading more transparent and efficient.

Smarter Plot Grading in CodeGrade: Two Automated Approaches for Faster Feedback

Automate plot grading in CodeGrade using Image Comparison or Object Inspection for faster feedback in data visualization courses.

Hands-On Python for Engineering Applications at Ferris State

See how Ferris State teaches practical programming, data analysis, and automation, building student confidence and skills for their future careers.

Sign up to our newsletter