Actions Navigation Grid

Fixed-width, left-aligned grid layout for CRUD Action Tiles. No outer padding/margins — grid sits flush with its container. Each tile maintains uniform width (220px) regardless of count. Tiles never stretch or distribute extra spacing — gaps remain constant. Maximum 5 tiles per CRUD page. Use this pattern inside App Content Containers for organized, accessible action navigation.

1 Tile 3 Tiles 5 Tiles (Max) Glassy Context

📐 Context vs. Theme

Context = Physical placement in the layout (standard page vs. glassy overlay/hero).
Theme = Site-wide user preference (light/dark mode toggle 🌙).

Below previews show grids in both contexts. Use the 🌙 toggle (top-right) to test how grids look in both themes. Grids should work correctly in all 4 combinations: Light+Standard, Light+Glassy, Dark+Standard, Dark+Glassy.

🎯 Design Intent

Actions Navigation Grid ensures compact, organized CRUD action layout with fixed tile sizing.

1. Single Action (1 Tile)

Single action layout. Use when a CRUD page has one primary action (e.g., "Add new Currency" on a dictionary page). The grid ensures the tile remains compact-sized rather than stretching to fill the container.

1.1 Standard Layout Preview

Standard Context

For use on normal app pages and content areas

Add new
Currency

1.2 Standard Layout HTML Snippet

HTML 
<div class="actions-navigation-grid">
  <a href="/pl/admin/dictionaries/currencies/add" class="action-tile">
    <div class="action-tile-icon">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
      </svg>
    </div>
    <div class="action-tile-content">
      <div class="action-tile-title">Add new</div>
      <div class="action-tile-subtitle">Currency</div>
    </div>
  </a>
</div>

1.3 Glassy Layout Preview

Glassy Context

Use on dark overlays and glass panels (app shell signed-in)

Add new
Currency

1.4 Glassy Layout HTML Snippet

HTML 
<div class="actions-navigation-grid is-glassy">
  <a href="/pl/admin/dictionaries/currencies/add" class="action-tile is-glassy">
    <div class="action-tile-icon">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
      </svg>
    </div>
    <div class="action-tile-content">
      <div class="action-tile-title">Add new</div>
      <div class="action-tile-subtitle">Currency</div>
    </div>
  </a>
</div>

2. Three Actions (Common CRUD Set)

Three-tile layout. Typical CRUD page layout with Add, Show All, and one additional action (e.g., manage, archive). Tiles wrap responsively on smaller screens (2 + 1 on tablets, 1 column on mobile).

2.1 Standard Layout Preview

Standard Context

For use on normal app pages and content areas

Add new
Currency
Show all
Currencies
Import
From file

2.2 Standard Layout HTML Snippet

HTML 
<div class="actions-navigation-grid">
  <a href="/pl/admin/dictionaries/currencies/add" class="action-tile">
    <div class="action-tile-icon">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
      </svg>
    </div>
    <div class="action-tile-content">
      <div class="action-tile-title">Add new</div>
      <div class="action-tile-subtitle">Currency</div>
    </div>
  </a>

  <a href="/pl/admin/dictionaries/currencies" class="action-tile">
    <div class="action-tile-icon">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
      </svg>
    </div>
    <div class="action-tile-content">
      <div class="action-tile-title">Show all</div>
      <div class="action-tile-subtitle">Currencies</div>
    </div>
  </a>

  <a href="/pl/admin/dictionaries/currencies/import" class="action-tile">
    <div class="action-tile-icon">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
      </svg>
    </div>
    <div class="action-tile-content">
      <div class="action-tile-title">Import</div>
      <div class="action-tile-subtitle">From file</div>
    </div>
  </a>
</div>

2.3 Glassy Layout Preview

Glassy Context

Use on dark overlays and glass panels (app shell signed-in)

Add new
Currency
Show all
Currencies
Import
From file

2.4 Glassy Layout HTML Snippet

HTML 
<div class="actions-navigation-grid is-glassy">
  <a href="/pl/admin/dictionaries/currencies/add" class="action-tile is-glassy">
    <!-- ... icon + content ... -->
  </a>

  <a href="/pl/admin/dictionaries/currencies" class="action-tile is-glassy">
    <!-- ... icon + content ... -->
  </a>

  <a href="/pl/admin/dictionaries/currencies/import" class="action-tile is-glassy">
    <!-- ... icon + content ... -->
  </a>
</div>

3. Five Actions (Maximum)

Five-tile layout. Maximum recommended per CRUD page. Provides all major CRUD operations at a glance. Beyond 5 tiles, consider splitting into multiple sections or using a different navigation pattern.

3.1 Standard Layout Preview

Standard Context

For use on normal app pages and content areas

Add new
Currency
Show all
Currencies
Import
From file
Export
All records
Manage
Settings

3.2 Standard Layout HTML Snippet

HTML 
<div class="actions-navigation-grid">
  <!-- Tile 1: Add new -->
  <a href="/path/to/add" class="action-tile">
    <div class="action-tile-icon">...</div>
    <div class="action-tile-content">
      <div class="action-tile-title">Add new</div>
      <div class="action-tile-subtitle">Currency</div>
    </div>
  </a>

  <!-- Tile 2: Show all -->
  <a href="/path/to/list" class="action-tile">...</a>

  <!-- Tile 3: Import -->
  <a href="/path/to/import" class="action-tile">...</a>

  <!-- Tile 4: Export -->
  <a href="/path/to/export" class="action-tile">...</a>

  <!-- Tile 5: Manage (Max) -->
  <a href="/path/to/settings" class="action-tile">...</a>
</div>

3.3 Glassy Layout Preview

Glassy Context

Use on dark overlays and glass panels (app shell signed-in)

Add new
Currency
Show all
Currencies
Import
From file
Export
All records
Manage
Settings

3.4 Glassy Layout HTML Snippet

HTML 
<div class="actions-navigation-grid is-glassy">
  <!-- Tile 1: Add new -->
  <a href="/path/to/add" class="action-tile is-glassy">...</a>

  <!-- Tile 2: Show all -->
  <a href="/path/to/list" class="action-tile is-glassy">...</a>

  <!-- Tile 3: Import -->
  <a href="/path/to/import" class="action-tile is-glassy">...</a>

  <!-- Tile 4: Export -->
  <a href="/path/to/export" class="action-tile is-glassy">...</a>

  <!-- Tile 5: Manage (Max) -->
  <a href="/path/to/settings" class="action-tile is-glassy">...</a>
</div>

Usage Guidelines

✅ Do

  • • Use grid wrapper class actions-navigation-grid
  • • Keep tile count to maximum 5 per CRUD page
  • • Nest Action Tiles directly inside the grid
  • • Apply is-glassy to both grid and tiles in glassy context
  • • Let grid handle fixed-width (220px) tile sizing automatically
  • • Let tiles align naturally to the left edge of the container
  • • Use semantic HTML links for navigation
  • • Place grid at the top of CRUD page content

❌ Don't

  • • Don't exceed 5 tiles per grid
  • • Don't force tiles to stretch or expand to fill container width
  • • Don't center or justify-spread the grid — tiles always align left
  • • Don't override grid CSS with page-level styles
  • • Don't mix standard and glassy tiles in same grid
  • • Don't use grid for primary dashboard navigation (use Dashboard Tile instead)
  • • Don't nest grids inside grids
  • • Don't hardcode gap/padding values; use DS tokens only

📋 Tile Count Guidelines

  • 1-3 tiles: Simple CRUD pages (Add, Show All, optionally Import/Export)
  • 4-5 tiles: Full CRUD sets (Add, Show All, Import, Export, Manage/Archive)
  • 6+ tiles: Consider splitting into multiple action groups or sections

⚠️ Layering Contract

Grid layout lives in /assets/css/actions-navigation-grid.css. Individual tile styling lives in /assets/css/action-tile-compact.css. Do not override grid layouts or tile styles in page CSS. Extend in the Design System instead.

CSS Location

Grid layout styles are defined in:

/assets/css/actions-navigation-grid.css

Imported by: /assets/css/ui-system.css

Includes: Responsive grid with minmax column sizing, consistent gaps/padding, glassy context support, and mobile optimizations.

Companion: /assets/css/action-tile-compact.css — Individual tile styling

Related Documentation

Action Tile (Compact)

Individual tile component for CRUD actions

Dashboard Tile

Full-height vertical tiles for major sections

App Shell (Signed-in)

Complete layout showing action grid placement