UI kit Host page with its own topbar and sidebar
v2.1.1

The service rail

One column of service icons on the left edge of every service. Hover or click an icon to see that service's pages, press Ctrl+K (or /) to search every page of every service, and on a phone open the apps button at the bottom left. Menus are built from the registry JSON; two tags, no framework, no cookies, no storage.

services.json SRI manifest

Host API

Everything the rail shows comes from services.json plus what the host tells it.

Adopt the rail

Pinned, immutable v2.1.1 with Subresource Integrity (recommended):

<link rel="stylesheet" href="https://ui.microsvcapi.com/v2.1.1/shell.css"
      integrity="sha384-bTL1FrjoUwv6YxD3xBEvHFWf77inIGEj2xyL2RSJMMGdld5TSrEbYGUfLpcqP3xP" crossorigin="anonymous">
<script src="https://ui.microsvcapi.com/v2.1.1/shell.js" defer
        integrity="sha384-hLE06sSJOkv9jMWAuZRGcTjEYlK95NKVIKMv6rctx/v/QSNpKG8610OOzM8sWSxU" crossorigin="anonymous"
        data-msvc-service="<registry id>"></script>

Optional Material layer for the host's Bootstrap 5 components:

<link rel="stylesheet" href="https://ui.microsvcapi.com/v2.1.1/tokens.css"
      integrity="sha384-j3XAtcXusPbbG4lqAXSbekElP0Y2icJBpIVDCsa9x06pi2z4oeg8DDTw0ewVhJl/" crossorigin="anonymous">
  1. Remove /intranet/assets/js/global-header.js (or the global-header.cfm include).
  2. Fixed or sticky chrome: left: var(--msvc-rail-w, 0px) instead of left: 0; full widths become calc(100% - var(--msvc-rail-w, 0px)).
  3. List the service's pages in the registry (navigation.items) so they appear in the flyout and the palette.
  4. Optional: data-msvc-palette-keys="/" when the host already uses Ctrl+K.

The v1 top bar stays published unchanged at /v1/ and /v1.0.1/.

Events

The kit never stores anything. It announces changes so a host can persist them its own way.

  • Hover an icon, pick a page or press Ctrl+K: msvc:navigate, msvc:recent, msvc:pinned and msvc:theme appear here.