APEX 5- Using Images as an Top Navigation Menu

Overview: 1. Purpose. 2. Benefits. 3. Steps.   4. Screen shots. 5. Conclusion.

1.  Purpose:

This document describes how to Use an Favicons in Apex 5 Top Navigation Menu.

           In Apex 5, Navigation Menu Position is either Side or Top Navigation.

In Side Navigation menu, if we apply the favicons then it will display the menu correctly. But while applying Top Navigation Menu favicons will not be displayed. Also there’s a requirement to show only favicons in place of menu labels in Top Navigation Menu.

   2.  Benefits:

 We can display only ICONS / Images in Apex Top Navigation Menu.

   3.  Steps:

Step1: Copy an Navigation Bar Template to a new name Template.

Step2: Go to New Template, apply the following changes:

1. List Template Current

<li class="t-NavigationBar-item is-active #A02#">

  <a style="background-color:#e2e1de; line-height:2.0rem" class="t-Button t-Button--icon t-Button--header t-Button--navBar" href="#LINK#" role="button" title="#TEXT_ESC_SC#"

      id ="list_id">

      <span style= "font-size: 3.5rem;Color:black" class="t-Icon #ICON_CSS_CLASSES#"></span>

  </a>

</li>

2. List Template Current with Sublist Items

<li class="t-NavigationBar-item is-active #A02#">

  <button style="background-color:#e2e1de; line-height:2.0rem" class="t-Button t-Button--icon t-Button t-Button--header t-Button--navBar js-menuButton" type="button" id="#LIST_ITEM_ID#" data-menu="menu_#LIST_ITEM_ID#" title="#TEXT_ESC_SC#">

      <span style= "font-size: 3.5rem;Color:black;" class="t-Icon #ICON_CSS_CLASSES#"></span><span style= "vertical-align:middle;" class="a-Icon icon-down-arrow"></span>

  </button>

3. List Template Noncurrent

<li class="t-NavigationBar-item #A02#">

  <a style="background-color:#e2e1de; line-height:2.0rem" class="t-Button t-Button--icon t-Button--header t-Button--navBar" href="#LINK#" role="button" title="#TEXT_ESC_SC#"

      id ="list_id">

    <span style= "font-size: 3.5rem;Color:black;" class="t-Icon #ICON_CSS_CLASSES#"></span>

  </a>

</li>

4. List Template Noncurrent with Sublist Items

<li class="t-NavigationBar-item #A02#">

  <button style="background-color:#e2e1de;" class="t-Button t-Button--icon t-Button t-Button--header t-Button--navBar js-menuButton" type="button" id="#LIST_ITEM_ID#" data-menu="menu_#LIST_ITEM_ID#" title="#TEXT_ESC_SC#">

      <span style= "font-size: 3.5rem;Color:black;" class="t-Icon #ICON_CSS_CLASSES#"></span><span style= "vertical-align:middle;color:black" class="a-Icon icon-down-arrow"></span>

  </button>

Step3: Go to Application Navigation Attributes > User Interface > Navigation Menu > Position- Top > List Template - Select New Template which we created.

4. Screen shots: 

5. Conclusion:

Thus we can apply the Top Navigation Menu with Favicons/Images in Oracle Apex 5.