Found an even easier way of doing it (without creating a custom pipe): add a map to the observable.

component.ts

this.activeTab$ = this.pageTabs$.map(x => x[0]);

component.html

<nav-tabs
   [tabs]="(pageTabs$ | async)"
   [activeTab]="(activeTab$ | async)">
</nav-tabs>

A simpler way it's to assign it to a template value with the as statement

<nav-tabs
   [tabs]="(pageTabs$ | async as pageTabs)"
   [activeTab]="pageTabs[0]">
</nav-tabs>

I would just write a new getter in your components code:

 public get activeTab$() {
   return this.pageTabs$.map(tabs => Array.isArray(tabs)? tabs[0]: null;
 }

and then use it:

 [active-tab]="activeTab$ | async"

Or you can do it in your nav-tabs component:

 public get activeTab() {
    return Array.isArray(this.tabs)? tabs[0]: null;
 }