Why Your Slate Portal Tabs Navigate Away Instead of Loading In-Page

The Problem

A common Slate portal issue occurs when a sidebar or tab navigation looks like an in-page navigation system but actually performs a full page navigation every time the user clicks a link.

For example:

<a href="?cmd=application">Application</a>

This technically works. The browser navigates to the requested portal method. But if the design is intended to behave like a modern single-page portal, the result is a noticeable page reload and the portal loses the smooth tabbed experience users expect.

The underlying issue is usually not CSS. It is the relationship between the navigation markup and the JavaScript responsible for loading portal methods.

The Better Pattern

When the portal's JavaScript uses data-tab to identify the Slate method that should be loaded, the navigation should expose the method Action through that attribute.

For example:

<a
  class="portal-sidebar-nav__item"
  data-tab="application"
  href="?tab=application"
>
  <span class="portal-sidebar-nav__number">02</span>
  <span class="portal-sidebar-nav__label">Application</span>
</a>

The important part is:

data-tab="application"

That value should correspond to the Action assigned to the Slate portal method.

The href can remain as a reasonable fallback for accessibility or environments where JavaScript does not execute, but it should not be responsible for the normal in-page interaction.

Why href="?cmd=..." Alone Is Not Enough

An href tells the browser where to navigate.

It does not tell your portal JavaScript:

• Which Slate method should be loaded.

• Which navigation item should become active.

• Where the method content should render.

• Whether the browser navigation should be intercepted.

Those responsibilities belong to the portal's tab-loading logic.

If the JavaScript is looking for something such as:

document.querySelectorAll("[data-tab]")

but your links only contain href="?cmd=...", the JavaScript never receives the information it expects.

Recommended Structure

A sidebar might look like this:

<div class="portal-sidebar-nav__items subtabs">

  <a
    class="portal-sidebar-nav__item"
    data-tab="overview"
    href="?tab=overview"
  >
    <span class="portal-sidebar-nav__number">01</span>
    <span class="portal-sidebar-nav__label">Overview</span>
  </a>

  <a
    class="portal-sidebar-nav__item"
    data-tab="application"
    href="?tab=application"
  >
    <span class="portal-sidebar-nav__number">02</span>
    <span class="portal-sidebar-nav__label">Application</span>
  </a>

  <a
    class="portal-sidebar-nav__item"
    data-tab="financial-aid"
    href="?tab=financial-aid"
  >
    <span class="portal-sidebar-nav__number">03</span>
    <span class="portal-sidebar-nav__label">Financial Aid</span>
  </a>

</div>

The exact Action names will vary by portal.

Development Tip

Treat the following as three separate layers:

1. Slate Method Action
   Defines the method that exists in Slate.

2. Navigation Markup
   Identifies that Action using something such as data-tab.

3. JavaScript Loader
   Detects the selection and loads the appropriate method into the content container.

When those three pieces use the same identifier, tabbed portal navigation becomes significantly easier to maintain.

Takeaway

If a Slate portal's tabs are reloading the page instead of updating content in-place, do not start by troubleshooting the styling.

Start by checking whether the navigation's data-tab values actually match the Actions of the corresponding Slate portal methods.