make simple menu navigation bootstrap

I'm newbie and I want to create web part have menu navigation bootstrap,in my code I just read all pages and plus html element but nothing happen with 'let html' variables, below is my code

private _getallpage():void {

    let html:string = `<nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
            <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
        <ul class="nav navbar-nav">`;
    const element:Element = this.domElement.querySelector("#webinfo");
    const w = new Web("https://tenant.sharepoint.com/sites/dev1");

    w.lists.getByTitle("Pages").items
        .select("Title", "FileRef", "FieldValuesAsText/MetaInfo")
        .expand("FieldValuesAsText")
        .get().then(r => {

            for (var i = 0; i < r.length; i++) {
                html +=`<li><a href="#">` + r[i].Title + `</a></li>`;
            }

            html += `</ul></div></nav>`;
    }).catch(e => { console.error(e); });

    console.log(html);
    element.innerHTML = html;
}