PT EN
Back to site

Shell navigation — side menu and breadcrumb

Platforms with dozens of screens tend to become a maze: you open a feature, lose track of where you are and start over from the home page. In DATTA, the side menu and the navigation trail (breadcrumb) work together so you always know where you are — and can jump back to any point with one click.

Side menu

The side menu has three states, and switches between them according to what you are doing:

  • Expanded (280px) — shows sections, groups and items with labels. This is the initial state on desktop.
  • Minimized / rail (72px) — only the icons of the top-level items, all centered. The menu collapses automatically when you navigate to a screen, enlarging the working area, and expands again from the menu (hamburger) button.
  • Drawer (phones and narrow screens, below 768px) — the menu opens over the content, with a dimmed background; it closes when you tap outside.

When you resize the window, the menu re-evaluates its mode in real time — it does not get "stuck" in the wrong layout when crossing the 768px desktop/mobile threshold.

Rail tooltips

With the menu minimized, hover (or navigate with the keyboard) over any icon: a tooltip appears to the right of the rail with the item's name and description — for example, "DATTA BI — Dashboards, modelos de dados e visuais analíticos". Clicking:

  • on a leaf item (Chat, Knowledge Catalog, Sistema…) navigates directly;
  • on a group (DATTA Extract, DATTA BI…) expands the menu already open at that point.

The descriptions come from the same screen catalog that feeds the navigation trail — name and description are always identical in both places.

System — every setting on a single screen

Sistema is a single menu item, with the gear icon: one click opens the System screen, which gathers every configuration option of the platform as cards. There is no submenu to expand any more, and no Security branch hidden inside the menu — opening the Users screen went from three clicks (open Configurar, open Segurança, click Usuários) down to two (System, then the card).

The cards come grouped, in the same order the settings appear in the tabs:

  • Segurança — Usuários, Roles e Permissões and Meu Prompt.
  • Plataforma — Geral, IA, Workspaces, Drivers JDBC, Certificados, DATTA Captain, Logs, Arquitetura, Manutenção and the Console do Cluster.
  • Contextos — Gerenciar, Painéis and Ontologias.
  • Conexões — Cadastro de Fontes, Status do ACOC and Fluxo de Dados.
  • Data Layer — Visão Geral plus every data engine of the platform.

The screen also gives you:

  • Search by name: the Buscar configuração field filters the cards as you type, ignoring accents — searching for "conexoes" finds Conexões. It also looks at the card description, so "prompt" brings up Meu Prompt. With no match, the screen explains what happened and offers to clear the search.
  • Only what you can use: a card for an admin-only setting does not show up for users without that profile — the same rule the old menu and the tabs already applied.
  • Console do Cluster opens in a new browser tab, flagged by the Nova aba badge with an external-link icon.
  • Mobile: below 768px the cards stack into a single column, with a comfortable touch target.

Every card is a real link: clicking navigates without reloading the platform, Cmd/Ctrl+click opens the setting in a new tab, and the browser back button brings you back to the System screen.

Horizontal tabs inside the groups

Once a setting is open, the others stay one click away: at the top of the content area, right below the trail, the row of horizontal tabs lists every group.

  • Simple tabs (Geral, IA, Logs…) open the corresponding screen directly.
  • Group tabs (Segurança, Contextos, Conexões, Data Layer) show a second row of sub-tabs; Data Layer includes the Visão Geral sub-tab with an overview of the platform data engines.
  • The row scrolls horizontally when it does not fit the window width — including on mobile.
  • Admin-only tabs only show up for users with that profile.

Nothing changes in URLs: a deep link such as /index.html?view=settings-drivers still opens the same screen — now with the DATTA › Sistema › Drivers JDBC trail and the right tab lit.

The navigation trail sits in a fixed bar at the top of the content area and reflects the real hierarchy of the menu:

DATTA › Sistema › Data Layer › Neo4j
  • Clickable links: the DATTA root goes back to Chat; an ancestor with its own screen navigates to it (Sistema goes back to the screen with all the cards, Data Layer opens the overview of the data engines); a structural ancestor opens the side menu at that point. The last link — the current screen — is not clickable.
  • Always-synchronized URL: every navigation updates the address (?view=…). That means you can bookmark any screen, share the link with a colleague and use the browser's back/forward buttons. A deep link such as /index.html?view=settings-neo4j restores the same screen, the same trail and the menu at the same point. Cmd/Ctrl+click on a link opens it in a new tab.
  • Deep levels: screens with internal navigation (e.g. DATTA BI) report their open levels to the shell — the trail becomes DATTA › DATTA BI › Dashboards › <workspace> › <dashboard>, and clicking a deep level restores exactly that state of the screen.
  • Smart collapsing: above 4 levels, the middle of the trail collapses into … (click to expand); on phones only the root and the current screen remain.

Practical example — going back without getting lost

  1. In the side menu, click Sistema and, on the card screen, open Neo4j, in the Data Layer group. The trail shows DATTA › Sistema › Data Layer › Neo4j.
  2. Copy the browser URL and paste it into another tab: the same screen opens, with the same trail and the menu positioned at the same point.
  3. Click Data Layer in the trail to go up one level, Sistema to go back to the screen with every setting, or DATTA to go straight back to Chat. The browser back button walks the same path.
  4. Need to compare two screens? Cmd/Ctrl+click a link in the trail — or a card on the System screen — and it opens in a new tab, without losing the current one.

Architecture details in breadcrumb component.