How to add custom page in menu bar in magento2?

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php
/**
 * Top menu for store
 *
 * @var $block \Magento\Theme\Block\Html\Topmenu
 */
?>
<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>
<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>

<?php $pageurl = $this->getUrl('*/*/*', ['_current' => true, '_use_rewrite' => true]);?>
<?php $x =  explode("/",$this->getUrl('*/*/*', ['_current' => true, '_use_rewrite' => true])); $x[4]; ?>

<nav class="navigation" data-action="navigation">
    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
   
        <li class="level0 nav-0 first <?php if($x[4]=="") { echo "active"; }?> level-top ui-menu-item" role="presentation">
            <a href="<?php echo $block->getUrl();?>" class="level-top ui-corner-all" id="ui-id-3" tabindex="-1" role="menuitem">
            <span>Home</span></a>               
        </li>
       
        <li class="level0 nav-1 last <?php if($x[4]=="about-us") { echo "active"; }?> level-top ui-menu-item" role="presentation">
        <a href="<?php echo $block->getUrl();?>about-us" class="level-top ui-corner-all" id="ui-id-3" tabindex="-1" role="menuitem">
        <span>About us</span></a>
       
        <?php /* @escapeNotVerified */ echo $_menu; ?>
        <?php /* @escapeNotVerified */ echo $block->getChildHtml(); ?>

        <li class="level0 nav-5 last <?php if($x[4]=="contact-us") { echo "active"; }?> level-top ui-menu-item" role="presentation">
        <a href="<?php echo $block->getUrl();?>contact-us" class="level-top ui-corner-all" id="ui-id-3" tabindex="-1" role="menuitem">
        <span>Contact us</span></a>
       
        </li>

    </ul>
</nav>