Navigation

Description: The navigation allows the user to control the follow of the site. In the examples below, a user is able to access:

508 Guidelines: The navigation contains links; therefore, to pass 508, all links must be keyboard accessible, and the screen reader should read each link. Users can navigate to the links in the drop down menu by tabbing to the menu and then pressing the up and down arrow keys.

TIP: To fix the navbar to the top of the viewport, wrap the navbar in a diev with the class attribute navbar-fixed-top.

Patient Selection Navbar

Description: This navigation bar contains text for Patient Selection, help icons, My Workspace button, and a dropdown with login information and a sign out button.

eHMP UI Navbar

Description: This navigation bar contains a link back to Patient Selection, help icons, the current patient button, My Workspace button and a dropdown with login information and a sign out button.

Copy 
<div id="header-region">
    <div>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <ul class="nav navbar-nav">
                    <li class="navbar-text">Patient Selection</li>
                    <li class="top-margin-xs">
                        <div class="help-icon ">
                            <a id="linkHelp-patient_search_button" class="help-icon-link" href="help/eHMP_User Guide for Release 1.3_v1.1_12012015.htm#_Toc435776076" target="helpIconUniqueWindow" tooltip-data-key="Help" tooltip-data-placement="" title="Press enter to access the help content. You will be redirected to a new browser window.">
                                <i class="fa fa-question-circle fa-lg"><span class="sr-only">Help</span></i>
                            </a>
                        </div>
                    </li>
                    <li><a href="#" id="provider-centric-view-nav-header-tab" route-id="provider-centric-view" class="navigation-tab" title="Press enter to navigate to the My Workspace View">My Workspace</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="top-margin-xs">
                        <div class="help-icon ">
                            <a id="linkHelp-user_info" class="help-icon-link" href="help/eHMP_User Guide for Release 1.3_v1.1_12012015.htm#_Toc435776078" target="helpIconUniqueWindow" tooltip-data-key="Help" tooltip-data-placement="" title="Press enter to access the help content. You will be redirected to a new browser window.">
                                <i class="fa fa-question-circle fa-lg"><span class="sr-only">Help</span></i>
                            </a>
                        </div>
                    </li>
                    <li class="dropdown">
                        <a href="#" id="eHMP-CurrentUser" class="dropdown-toggle" data-toggle="dropdown" data-target="#" aria-expanded="false" title="Press enter to open user menu">
                            <span class="fa fa-user"></span> USER, PANORAMA <i class="fa fa-caret-down"></i></a>
                        <ul class="dropdown-menu right-padding-sm">
                            <li class="color-grey-darkest">PANORAMA</li>
                            <li>Clinician</li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#" id="logoutButton" title="Press enter to sign out and return to sign in page."><span class="fa fa-power-off"></span> Sign Out</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>
Copy 
<div id="header-region">
    <div>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <ul class="nav navbar-nav">
                    <li class="right-padding-sm">
                        <a id="patientSearchButton" href="#" title="Press enter to return to patient search and choose another patient"><i class="fa fa-search"></i> Patient Selection</a>
                    </li>
                    <li class="top-margin-xs">
                        <div class="help-icon ">
                            <a id="linkHelp-patient_search_button" class="help-icon-link" href="help/eHMP_User Guide for Release 1.3_v1.1_12012015.htm#_Toc435776076" target="helpIconUniqueWindow" tooltip-data-key="Help" tooltip-data-placement="" title="Press enter to access the help content. You will be redirected to a new browser window.">
                                <i class="fa fa-question-circle fa-lg"><span class="sr-only">Help</span></i>
                            </a>
                        </div>
                    </li>
                    <li><a href="#" id="current-patient-nav-header-tab" title="Press enter to navigate to the Eight, Patient Overview Screen Navigation Tab">Eight, Patient</a></li>
                    <li><a href="#" id="provider-centric-view-nav-header-tab" class="navigation-tab" title="Press enter to navigate to the My Workspace View view">My Workspace</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="top-margin-xs">
                        <div class="help-icon ">
                            <a id="linkHelp-user_info" class="help-icon-link" href="help/eHMP_User Guide for Release 1.3_v1.1_12012015.htm#_Toc435776078" target="helpIconUniqueWindow" tooltip-data-key="Help" tooltip-data-placement="" title="Press enter to access the help content. You will be redirected to a new browser window.">
                                <i class="fa fa-question-circle fa-lg"><span class="sr-only">Help</span></i>
                            </a>
                        </div>
                    </li>
                    <li class="dropdown">
                        <a href="#" id="eHMP-CurrentUser" class="dropdown-toggle" data-toggle="dropdown" data-target="#" aria-expanded="false" title="Press enter to open user menu" aria-haspopup="true">
                            <span class="fa fa-user"></span> USER, PANORAMA <i class="fa fa-caret-down"></i></a>
                        <ul class="dropdown-menu right-padding-sm" role="menu">
                            <li class="color-grey-darkest" role="presentation">PANORAMA</li>
                            <li role="presentation">Clinician</li>
                            <li role="presentation" class="divider"></li>
                            <li role="presentation"><a href="#" id="logoutButton" title="Press enter to sign out and return to sign in page." role="menuitem" tabindex="-1"><span class="fa fa-power-off"></span> Sign Out</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>