PHPackages                             acpl/mobile-tab - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. acpl/mobile-tab

ActiveFlarum-extension[Utility & Helpers](/categories/utility)

acpl/mobile-tab
===============

1.4.5(1y ago)1030.3k—4.1%61MITTypeScriptCI passing

Since Jul 18Pushed 1mo ago3 watchersCompare

[ Source](https://github.com/android-com-pl/mobile-tab)[ Packagist](https://packagist.org/packages/acpl/mobile-tab)[ GitHub Sponsors](https://github.com/android-com-pl/mobile-tab?sponsor=1)[ RSS](/packages/acpl-mobile-tab/feed)WikiDiscussions 2.x Synced 1mo ago

READMEChangelog (10)Dependencies (1)Versions (28)Used By (1)

Mobile Tab Component
====================

[](#mobile-tab-component)

[![License](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667) [![Latest Stable Version](https://camo.githubusercontent.com/67927d8b3a519e3aa2f938688a9459aa7a824d8f7cf7fc6a811507fe15269283/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6163706c2f6d6f62696c652d7461622e737667)](https://packagist.org/packages/acpl/mobile-tab) [![Total Downloads](https://camo.githubusercontent.com/e13cdbac355ab73afa37b8c3647237cbb44e8ef9c8113865776fb86b858b1ae6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6163706c2f6d6f62696c652d7461622e737667)](https://packagist.org/packages/acpl/mobile-tab/stats) [![GitHub Sponsors](https://camo.githubusercontent.com/5c68940361d1e0d29b21caab7c8c56a3eacd733d5825f1331e17ea69f5e105ba/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f446f6e6174652d2545322539442541342d2532336462363161322e7376673f266c6f676f3d676974687562266c6f676f436f6c6f723d7768697465266c6162656c436f6c6f723d313831373137)](https://github.com/android-com-pl/mobile-tab?sponsor=1)

A [Flarum](https://flarum.org) extension. Adds a bottom tab on mobile.

[![Imgur](https://camo.githubusercontent.com/e4932078db6535db20811cb23c9d5c962f4f02b3b35a4dad2581baf33d4b56e6/68747470733a2f2f692e696d6775722e636f6d2f514772575179502e706e67)](https://camo.githubusercontent.com/e4932078db6535db20811cb23c9d5c962f4f02b3b35a4dad2581baf33d4b56e6/68747470733a2f2f692e696d6775722e636f6d2f514772575179502e706e67)

Installation
------------

[](#installation)

Install with composer:

```
composer require acpl/mobile-tab
```

Updating
--------

[](#updating)

```
composer update acpl/mobile-tab
php flarum migrate
php flarum cache:clear
```

Extending
---------

[](#extending)

Important

These instructions are for Flarum 2.0. For Flarum 1.x documentation, please refer to: [Flarum 1.x Guide](https://github.com/android-com-pl/mobile-tab/tree/1.x?tab=readme-ov-file#extending)

You can add, modify, and delete items in the mobile tab using your own extension. Read: [https://docs.flarum.org/2.x/extend/extending-extensions](https://docs.flarum.org/2.x/extend/extending-extensions/)

1. Install `acpl/mobile-tab` as your extension's composer dependency or add it as an [optional dependency](https://docs.flarum.org/2.x/extend/extending-extensions/#optional-dependencies) in your `composer.json`.
2. In the `tsconfig.json` file add `"ext:acpl/mobile-tab/*": ["../vendor/acpl/mobile-tab/js/dist-typings/*"]` to the `compilerOptions.paths` object.
3. You can now import and use the registry classes to modify the mobile tab.

### Example

[](#example)

Create `extendMobile.ts` in your extension's `js/common` directory:

```
import MobileTabItemsRegistry from "ext:acpl/mobile-tab/common/MobileTabItemsRegistry";
import app from "flarum/common/app";
import { extend } from "flarum/common/extend";

export default () => {
  extend(MobileTabItemsRegistry.prototype, "items", (items) => {
    // Add a simple link item
    items.add("following", {
      icon: "fas fa-star",
      label: app.translator.trans("my-ext.forum.index.following_label"),
      href: () => app.route("following"),
      canView: () => !!app.session.user,
      source: "extension",
    });

    // Add an item that we plan to turn into an interactive component on the forum frontend
    items.add("my-interactive-item", {
      icon: "fas fa-rocket",
      label: app.translator.trans("my-ext.forum.my_interactive_item_label"),
      source: "extension",
    });
  });
};
```

Use this file in both admin and forum. Example for the admin side:

```
import app from "flarum/admin/app";
import extendMobileTab from "../common/extendMobileTab";

app.initializers.add("my-ext/mobile-tab-example", () => {
  extendMobileTab();
  // ... other initializers
});
```

To make an item interactive on the forum, assign a component using the `forumComponent` property.

Note

Interactive components should be registered in `MobileTabItemsRegistryForum` because they import `from flarum/forum/*`. Registering them in the common registry would break the admin panel.

```
import MobileTabItemsRegistryForum from "ext:acpl/mobile-tab/forum/data/MobileTabItemsRegistryForum";
import { extend } from "flarum/common/extend";
import app from "flarum/forum/app";
import extendMobileTab from "../common/extendMobileTab";
import MyCustomTabItem from "./components/MyCustomTabItem";

app.initializers.add("my-ext/mobile-tab-example", () => {
  extendMobileTab();

  extend(MobileTabItemsRegistryForum.prototype, "items", (items) => {
    // Get the item defined in common and enhance it for the forum
    const myItem = items.get("my-interactive-item");

    items.setContent("my-interactive-item", {
      ...myItem, // Keep icon, label, and other shared properties
      forumComponent: MyCustomTabItem, // Add the forum-only interactive component
    });
  });
  // ... other initializers
});
```

```
import MobileTabComponent from "ext:acpl/mobile-tab/common/components/MobileTabComponent";
import Button from "flarum/common/components/Button";

export default class MyCustomTabItem extends MobileTabComponent {
  view() {
    const { icon, label } = this.attrs.definition;

    return (
       console.log("clicked")}
      >
        {label}

    );
  }
}
```

Links
-----

[](#links)

- [Packagist](https://packagist.org/packages/acpl/mobile-tab)
- [GitHub](https://github.com/android-com-pl/mobile-tab)
- [Discuss](https://discuss.flarum.org/d/28216-mobile-tab)

###  Health Score

49

—

FairBetter than 95% of packages

Maintenance67

Regular maintenance activity

Popularity37

Limited adoption so far

Community20

Small or concentrated contributor base

Maturity61

Established project with proven stability

 Bus Factor1

Top contributor holds 64.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~63 days

Recently: every ~31 days

Total

28

Last Release

57d ago

Major Versions

1.4.4 → 2.0.0-beta.12024-12-13

1.4.5 → 2.0.0-beta.42025-11-12

### Community

Maintainers

![](https://www.gravatar.com/avatar/eeb64214aa3264c9725d7ed0c0d066d3a3539f10152b390845f17532deffe580?d=identicon)[rafaucau](/maintainers/rafaucau)

---

Top Contributors

[![rafaucau](https://avatars.githubusercontent.com/u/25438601?v=4)](https://github.com/rafaucau "rafaucau (102 commits)")[![flarum-bot](https://avatars.githubusercontent.com/u/39334649?v=4)](https://github.com/flarum-bot "flarum-bot (38 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (10 commits)")[![StyleCIBot](https://avatars.githubusercontent.com/u/11048387?v=4)](https://github.com/StyleCIBot "StyleCIBot (3 commits)")[![FoskyM](https://avatars.githubusercontent.com/u/39661663?v=4)](https://github.com/FoskyM "FoskyM (3 commits)")[![jaggy](https://avatars.githubusercontent.com/u/1993075?v=4)](https://github.com/jaggy "jaggy (1 commits)")[![Stilic](https://avatars.githubusercontent.com/u/63605602?v=4)](https://github.com/Stilic "Stilic (1 commits)")

---

Tags

flarumflarum-extensionhacktoberfestnavigationflarum

### Embed Badge

![Health badge](/badges/acpl-mobile-tab/health.svg)

```
[![Health](https://phpackages.com/badges/acpl-mobile-tab/health.svg)](https://phpackages.com/packages/acpl-mobile-tab)
```

###  Alternatives

[fof/byobu

Well integrated, advanced private discussions.

61105.8k9](/packages/fof-byobu)[fof/user-bio

Add a user bio to user profiles

2196.5k9](/packages/fof-user-bio)[fof/links

Manage Flarum primary navbar menu links

39118.3k2](/packages/fof-links)[fof/drafts

Allow users to create post and discussion drafts

1771.1k5](/packages/fof-drafts)[fof/nightmode

Add a Night Mode option for your users to use on your Flarum forum

3774.5k2](/packages/fof-nightmode)[fof/best-answer

Mark a post as the best answer in a discussion

26135.2k15](/packages/fof-best-answer)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)