The Horizontal Navigation is an optional layout to the Vertical Navigation (aka: Side Navigation control) (Quartz). Meaning, one Application should use the Horizontal Tabs Navigation alternatively to the Side Navigation, depending on its requirements, mainly related to the complexity of navigable items. Preferably the Horizontal Navigation is suitable for a maximum of seven to nine primary items.
It displays the navigation items respectively in horizontal mode. The Tabs are displayed underneath the Tool Header, enabling the navigation into another page and context within the same Application while the Tool Header and the Tabs remain static.
The Horizontal Navigation Tabs are built with the IconTabBar 3.0. They can display icon + text, as the Side Navigation.
Example – Horizontal Navigation Text Only
Specifications
Component Areas
The Horizontal Navigation is always integrated with the Tool Header. It should not be displayed standalone.
Differently than the Side Navigation, the Horizontal Navigation does not embed a separate Utility Section (bottom aligned in the Side Navigation). Those items, mainly legal information and useful links, are recommended to be placed in the User Menu within the Tool Header (Quartz).
Another aspect differentiating the Horizontal Navigation layout is that it has only one display mode. It has no condensed or off-canvas mode, which remain specific states of the Side Navigation.
Desktop View
1Tools Header2Tab Navigation Area
Phone View
Selecting an item from the Overflow, item moves to the top right.
Drop Down Menu
The Drop Down Menu in Tools header is displayed horizontally middle aligned with Tab item.
In the Drop Down Menu the icon size and right padding remain the same as the IconTabs specifications. Only Icon color changes to: --sapContent_NonInteractiveIconColor; based on Process Tabs icons: VD Specifications – IconTabBar ProcessTabs. Also Drop Down List Typography and states are based in the List Control.
Transition Recommendation: Display Drop Down with subtle transition from top to bottom.
<div> <div></div> <div>Description</div> <div>in Cozy and Compact</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">A</span></strong></div> <div>Drop Down width and margins</div> <div>Minimum width equals the Tab width;<br>Left and right padding to tab: h0.5rem;</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">B</span></strong></div> <div>Drop Down Menu vertical Padding within Tab Bar</div> <div>-0.25rem;</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">C</span></strong></div> <div>Horizontal Padding between Tab (with our without down arrow)</div> <div>2rem;</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">D</span></strong></div> <div>Overflow right margin</div> <div>1rem;</div> </div>
Tool Header with Horizontal Navigation Specifications
The specs below apply to Tab filters with or without icon (text only).
<div> <div></div> <div>Description</div> <div>Cozy</div> <div>Compact</div> <div>Dark</div> <div>HCW & HCB</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">A1</span></strong></div> <div>Left and Right Margin</div> <div> <p>h1rem;<br>Refer to <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2058534928%23ToolHeader(Quartz)-LayoutandStructure">Tool Header</a><span> </span><a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2052690369">ShellBar (Fiori 3)</a> responsive margin and padding.</p> <p>v2.75rem; (standard height of IconTabBar InLine header), the same as Tools Header</p> </div> <div>–<br><em>The Tabs have the same design in compact and cozy, as the IconTab InlineMode. Only the drop down popover items change between compact and cozy</em></div> <div>–</div> <div>–</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">B</span></strong></div> <div>Icon*</div> <div> <p>Icon size: 1rem;<br>Padding right to icon: h0.5rem;</p> <p>Tab padding-top: 0.75rem;<br>Tab padding-bottom: 1rem;</p> <p>Icon color: --sapShell_Navigation_Selected_TextColor</p> <p><em>*Technically possible: The Horizontal Navigation without icon just removes the icon and its right padding</em></p> </div> <div>–</div> <div>–</div> <div>–</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">C1</span></strong></div> <div>Active Tabs</div> <div> <p>Tab padding-top: 0.75rem;<br>Tab padding-bottom: 1rem;</p> <p>Colors and style: follows the standard UniversalIconTabBar (Fiori 3) control</p> </div> <div>–</div> <div>–</div> <div>–</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">C2</span></strong></div> <div>Inactive Tabs</div> <div> <p>Tab padding-top: 0.75rem;<br>Tab padding-bottom: 1rem;</p> <p>Colors and style: follows the standard UniversalIconTabBar (Fiori 3) control</p> </div> <div>–</div> <div>–</div> <div>–</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">C3</span></strong></div> <div>Tabs with Subitems</div> <div> <p>Padding between text and arrow: h0.25rem;<br><em>→ No additional padding right to arrow;</em></p> <p>Tab padding-top: 0.75rem;<br>Tab padding-bottom: 1rem;</p> <p>Colors and style: follows the standard UniversalIconTabBar (Fiori 3) control</p> </div> <div>–</div> <div>–</div> <div>–</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);"> D</span></strong></div> <div>Floating bar</div> <div> <p>Height: 0.188rem; → selection bar has the same height as standard control in all Themes, including the deltas in HC <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2208148593">UniversalIconTabBar (Fiori 3)</a></p> <p>Selection bar width follows the total tab width (including icon) with no additional left and right margins.</p> <p>Border-radius: 0.125rem 0.125rem 0.125rem 0.125rem;</p> <p>Tab padding-top: 0.625rem (results in 10px);<br>Tab padding-bottom: 0.188rem (results in 3px);</p> </div> <div>–</div> <div>Colors and style: follows the standard UniversalIconTabBar (Fiori 3) control</div> <div>Colors and style: follows the standard UniversalIconTabBar (Fiori 3) control</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);"> E</span></strong></div> <div>Padding right to each Tab</div> <div>h2rem;</div> <div>–</div> <div>–</div> <div>–</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);"> F</span></strong></div> <div>Drop down arrow*</div> <div> <p>Padding between text and arrow: h0.25rem;<br>Follows the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2208148593%23UniversalIconTabBar(Fiori3)-SingleClickArea">Single Click Area</a> style and behaviour from standard control</p> <p>*Single click area gets icon color:<br>--sapShell_Navigation_Selected_TextColor;</p> </div> <div>–</div> <div>–</div> <div>–</div> </div>
