The Three Columns #

New in v1.2.0

The Admin Shell is divided into three columns. Each column has a distinct purpose and fixed or fluid width.

Column 1: Section Navigation (~160px) #

The leftmost column lists all top-level sections available in DDLS. Each section is displayed with a Dashicon icon and a label.

• Sections are grouped with visual dividers between logical groups.
• The currently active section is highlighted.
• Clicking any section item navigates to that section (loads the default view for that section).
• Extensions can add new sections to Column 1 via the dmsilm_admin_shell_sections filter.

Column 2: View Navigation (~180px) #

The middle column lists sub-pages (views) within the currently active section.

• Only views belonging to the active section are shown.
• The currently active view is highlighted.
• Clicking any view item navigates to that view within the current section.
• Full-width mode: If a section has no sub-views (for example, the Dashboard), Column 2 is hidden and the dmsilm-shell-wrap--full-width CSS class is applied to the shell. Column 3 then occupies the full remaining width.
• Extensions can add views to any section via the dmsilm_admin_shell_pages filter.

Column 3: Content (fluid) #

The rightmost column is the main content area. It fills all remaining horizontal space after Columns 1 and 2.

• Renders the output of the handler class for the current section/view combination.
• Every handler class exposes a render() method that the shell calls.
• Content here follows the same visual conventions as standard WordPress admin content.

Mobile Behavior #

On narrow screens the three columns stack vertically: Column 1 appears first, Column 2 below it, and Column 3 (the content) below that. This ensures the interface remains usable on tablets and small screens without horizontal scrolling.

Related Topics #

• [Understanding the Admin Shell](#)
• [Navigating the Admin](#)
• [Extension Admin Shell Integration](#)