# CASE: Navigation header in HTML

**URL:** <https://community.silverfin.com/t/case-navigation-header-in-html/2346>\
**Category:** Cases\
**Tags:** html, html-table\
**Created:** [September 19, 2022, 8:02am UTC](https://community.silverfin.com/t/case-navigation-header-in-html/2346 "2022-09-19T08:02:35Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michiel](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.silverfin.com/michiel/32/2364_2.png) [@Michiel](https://community.silverfin.com/u/Michiel)\
**Post date:** [September 19, 2022, 8:02am UTC](https://community.silverfin.com/t/case-navigation-header-in-html/2346/1 "2022-09-19T08:02:36Z")

</div>

As shown in this case ([CASE: create navigation headers](https://community.silverfin.com/t/case-create-navigation-headers/1839)), it’s very useful to add navigation headers to the top of your reconciliation templates to quickly jump to other reconciliations in the same workflow.

A similar table can be created by using an HTML table. In the example below, you can see the following specific code to get the result:  
\* Class usr-bordered is added to the table tag in order to show all borders  
\* Since we want a grey background, we put the navigation bar in the thead. An empty tbody tag is added as it’s always required to have a tbody

```auto
{% comment %}Navigation Header{% endcomment %}

{% assign header_array = "Short term debts;short_term_debts|Long term debts;long_term_debts|Equity;equity" | split:"|" %}

{% ic %}
  {% stripnewlines %}
    <table class="usr-width-100 usr-bordered">
      <thead>
        <tr>
          <th class="usr-align-center usr-line-top usr-line-bottom usr-line-right usr-line-left usr-width-20">
            {% linkto period.reconciliations.balance_sheet %}Balance sheet{% endlinkto %}
          </th>
          {% for template in header_array %}
            {% assign parts = template | split:";" %}
            {% assign template_name = parts[0] %}
            {% assign template_handle = parts[1] %}
            <th class="usr-align-center usr-line-top usr-line-bottom usr-line-right usr-line-left usr-width-20">
              {%if template_handle == current_reconciliation.handle %}
                <b>{{ template_name }}</b>
              {%else%}
                {% linkto period.reconciliations.[template_handle] %}
                  {{ template_name }}
                {% endlinkto %}
              {% endif %}
            </th>
          {% endfor %}
          <th class="usr-align-center usr-line-top usr-line-bottom usr-line-right usr-line-left usr-width-20">
            {% linkto period.reconciliations.income_statement %}Income statement{% endlinkto %}
          </th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  {% endstripnewlines %}
{% endic %}

```

Output:

 ![Schermafbeelding 2022-02-07 om 14.06.14](https://canada1.discourse-cdn.com/flex030/uploads/getsilverfin/original/2X/7/78620451f99a43e40ce48a122068bc3ce39c9afa.png)