Navbar загружается на всю html-страницу без обновления каждой страницы

Я делаю html-страницу навигационной панели, которая содержит навигационную панель, я хочу загрузить ее на всю свою страницу

<nav class = "navbar navbar-inverse">
<div class = "container">
    <div class = "navbar-header">
        <button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse"
                data-target = "#bs-example-navbar-collapse-1" aria-expanded = "false">
            <span class = "sr-only">Toggle navigation</span>
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
        </button>
        <a class = "navbar-brand" href = "index.html" id = "navbar-title"></a>
        <a class = "navbar-brand" href = "index.html">eLibrary</a>
    </div>
    <div class = "collapse navbar-collapse" id = "bs-example-navbar-collapse-1">
        <ul class = "nav navbar-nav">
            <li><a href = "index.html">Home</a></li>
            <li><a href = "add-book.html">Add Book</a></li>
            <li><a href = "view-book.html">View Book</a></li>
            <li><a href = "#">Issue Book</a></li>
            <li><a href = "#">View Issued Book</a></li>
            <li><a href = "#">Return Book</a></li>
            <li><a href = "index.html">Logout</a></li>
        </ul>
    </div>
</div>

Я делаю файл js для каждой страницы и загружаю на него панель навигации, он работает правильно, но проблема заключается в навигации, когда я перехожу к элементу формы, он практически загружает страницу выбранного элемента, но кажется, что страница обновляется, я хочу панель навигации Присутствовать немедленно, как я могу это сделать?