Skip to main content

​
Overview

Keystone uses a persistent sidebar on the left side of the screen as the primary navigation mechanism. The sidebar is always visible while you are working inside a company workspace and provides access to every major section of the application. The main content area fills the rest of the screen to the right of the sidebar.
The sidebar is organized into two types of navigation entries:
  1. Direct links — Single-click entries that take you directly to a page.
  2. Collapsible groups — Sections that expand to reveal multiple sub-pages.
Each entry has an icon on the left and a label to the right of the icon. Collapsible groups display a chevron arrow on the right side that rotates to indicate whether the group is expanded or collapsed. Direct links appear at the top of the sidebar, followed by collapsible groups separated by thin horizontal dividers.
Below is a complete reference of every navigation entry, organized in the order they appear in the sidebar. These items appear at the top of the sidebar and navigate directly to a page when clicked.

​
Collapsible Groups

These items expand to reveal sub-pages. Click the group header to toggle it open or closed.

​
Tasks

Manage operational tasks, templates, checklists, and recurring schedules.

​
Quality Control

Manage QC review processes for loan files.

​
Recruiting

Track recruiting candidates and manage onboarding.

​
Commission

Calculate, review, and manage employee commissions.

​
Accounting

Full double-entry accounting system for mortgage lending operations.

​
Directories

Lookup directories for key entities.

​
Administration

Company-wide settings and configuration.

​
How Active Pages Are Highlighted

Keystone visually indicates which page you are currently viewing: The currently active direct link receives:
  • A filled background (accent color).
  • Bold text with full foreground color.
  • A left border accent — a 2-pixel vertical line on the left edge of the item, providing a clear visual indicator.
  • The icon changes from muted to full foreground color.

​
Collapsible Group Sub-Items

When you are viewing a page within a collapsible group:
  • The sub-item receives a filled background and bold text.
  • The parent group automatically shows its contents (it does not collapse while a child is active).

​
Inactive Items

Inactive direct links and group headers use muted text colors and have no background fill. On hover, they display a subtle background highlight to indicate interactivity.

​
Collapsible Groups

​
Expanding and Collapsing

  • Click the group header (the row with the icon, label, and chevron) to toggle the group open or closed.
  • When expanded, the chevron points upward and the sub-items are revealed with a smooth animation. Sub-items are indented and connected to the group header by a thin vertical line on the left.
  • When collapsed, the chevron rotates to point downward and the sub-items are hidden.

​
Default State

All groups start in the expanded state when the page first loads. Your expand/collapse preferences are maintained during your current session but reset when you reload the page.

​
Visual Hierarchy

Collapsible groups are visually separated from the direct links at the top of the sidebar by a horizontal divider. Additional dividers appear between consecutive groups to help distinguish sections.

​
Collapsed Sidebar Mode

The sidebar supports a collapsed mode where it shrinks to show only icons, without labels. This gives more horizontal space to the main content area.

​
Behavior in Collapsed Mode

  • Direct links display only their icon, centered in the narrow sidebar. Hovering over an icon reveals a tooltip with the item’s label.
  • Collapsible groups display only the group icon. Clicking the icon navigates to the group’s first sub-item (e.g., clicking the Tasks icon navigates to the Tasks Dashboard). Hovering shows a tooltip with the group name.
  • If any sub-item in a group is the current active page, the group icon receives the active highlight treatment.

​
Company Switcher

If your account is associated with multiple companies — for example, you work for multiple brokerages that use Keystone, or you are an external collaborator such as a bookkeeper or accountant — you can switch between them: Click your company name or avatar in the header and select Switch Company, or navigate to the company selector page directly. The “Your Companies” page displays a card for each company you belong to. Click a company card to switch workspaces.
Note: Each company is a completely isolated workspace. Data, settings, employees, loans, and all other records are entirely separate between companies.

​
Mobile and Responsive Behavior

  • Desktop — The sidebar is fully visible with labels and icons.
  • Tablet — The sidebar may collapse to icon-only mode. Tooltips show labels on hover.
  • Mobile — The sidebar slides in as an overlay when you tap the menu icon.
The main content area is fully responsive and adjusts its layout (grid columns, padding, font sizes) based on the available screen width.

​
Keyboard and Accessibility

  • All navigation items are focusable and can be activated with the keyboard.
  • Collapsible group headers are rendered as <button> elements, ensuring screen readers announce them as interactive controls.
  • Sub-items within groups are standard <a> links, navigable with Tab and activated with Enter.
  • Tooltips in collapsed mode provide accessible labels for icon-only buttons.

​
Quick Reference