'Nativescript Actionbar drop-down list navigation

I'm trying to implement a drop-down list navigation in the Actionbar with Nativescript but can't seem to find any info about it whatsoever.

Similar to this and this.

I currently have a simple ActionBar:

    <Page.actionBar>
        <Page.actionBar>
            <ActionBar>
                <ActionBar.actionItems>
                    <ActionItem android.position="actionBar" icon="res://icon" ios.position="right" />
                </ActionBar.actionItems>
            </ActionBar>
        </Page.actionBar>
    </Page.actionBar>

Any tips?

Solution 1:^[1]

You can create the ActionBar in your first example image like this:

        <Page.actionBar>
        <ActionBar>
            <ActionBar.actionItems>
                <ActionItem android.position="popup" text="Add contact" />
                <ActionItem android.position="popup" text="About" />
            </ActionBar.actionItems>
        </ActionBar>
    </Page.actionBar>

That will look right on Android. I have no idea how to make it work for iOS.

Solution 2:^[2]

I used nativescript-menu to add pop up menu for both Android and iOS. Add this following code in your HTML file to add a menu icon in Action Bar.

<ActionBar class="action-bar-container">
<Label text="My Action Bar" class="action-bar-title"></Label>
      <ActionItem class="fas" icon="font://&#xf142;" ios.position="left" id="menuBtn" (tap)="buttonTap()"></ActionItem>
</ActionBar>

Remeber to import the library in your typescript file: import { Menu } from "nativescript-menu";

At last add the following code in you typescript file.

  buttonTap() {
    Menu.popup({
      view: this.page.getViewById("menuBtn"),
      actions: ["Example", "NativeScript", "Menu"]
    })
      .then(action => {
        alert(action.id + " - " + action.title);
      })
      .catch(console.log);
  }

Solution 3:^[3]

I have used NativeScript DropDown for this. Here is my template for nativescript-angular:

<ActionBar title="Some title" automationText="ActionBar">
    <StackLayout orientation="horizontal"
                 ios:horizontalAlignment="center"
                 android:horizontalAlignment="left">
                    <DropDown #dd
                      [items]="dropDownItems"
                      [selectedIndex]="dropDownSelectedId"
                      (selectedIndexChanged)="onDropDownSelect($event)"
                      class="action-label text-bold"
                      row="1" colSpan="2">
                    </DropDown>
    </StackLayout>
</ActionBar>

Hope it helps!

Solution 4:^[4]

On Svelte-native you can do something like this:

     <actionBar>
        <actionItem
            ios.systemIcon="16" ios.position="right" on:tap="{LockScreen}"
            text="Lock Screen" android.position="popup" />
        <actionItem
           ios.systemIcon="16" ios.position="right" on:tap="{logout}"
           text="Logout" android.position="popup" />
     </actionBar>

Source

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Holy Joe
Solution 2	Prabhas Kumra
Solution 3	Daniel Kucal
Solution 4	Dev

'Nativescript Actionbar drop-down list navigation

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]