PHPackages                             drago-ex/component - 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. drago-ex/component

ActiveLibrary[Utility & Helpers](/categories/utility)

drago-ex/component
==================

Collection of Bootstrap components and widgets for Nette Framework.

v2.1.0(1mo ago)0392↑220.8%2MITLattePHP >=8.3 <9CI passing

Since Mar 26Pushed 1mo ago1 watchersCompare

[ Source](https://github.com/drago-ex/component)[ Packagist](https://packagist.org/packages/drago-ex/component)[ RSS](/packages/drago-ex-component/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (10)Dependencies (20)Versions (22)Used By (2)

Drago Components
================

[](#drago-components)

Bootstrap components such as modal, offcanvas, dropdown, and tabs.

[![License: MIT](https://camo.githubusercontent.com/fdf2982b9f5d7489dcf44570e714e3a15fce6253e0cc6b5aa61a075aac2ff71b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d79656c6c6f772e737667)](https://github.com/drago-ex/component/blob/main/license)[![PHP version](https://camo.githubusercontent.com/171a089f57dff295b7478bf4f9e5f8d8f390924d8e11448b6fceec1d5c3399be/68747470733a2f2f62616467652e667572792e696f2f70682f647261676f2d6578253246636f6d706f6e656e742e737667)](https://badge.fury.io/ph/drago-ex%2Fcomponent)[![Coding Style](https://github.com/drago-ex/component/actions/workflows/coding-style.yml/badge.svg)](https://github.com/drago-ex/component/actions/workflows/coding-style.yml)

Requirements
------------

[](#requirements)

- PHP >= 8.3
- Nette Framework
- Composer
- Bootstrap
- Naja
- Node.js

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

[](#installation)

```
composer require drago-ex/component
```

Project files
-------------

[](#project-files)

File copying is handled automatically by [drago-ex/project-tools](https://github.com/drago-ex/project-tools), which must be installed in your project. Without it, copy the files manually according to the `copy` section in this package's `composer.json`. To skip this package, set `"skip": true` under `extra.drago-tools.packages.` in your root `composer.json`.

Modal and offcanvas
-------------------

[](#modal-and-offcanvas)

In the `Control` component, use the `Drago\Component\Component` trait.

Passing variables to the template:

```
$template->offcanvasId = $this->getUniqueIdComponent(self::Offcanvas);
$template->modalId = $this->getUniqueIdComponent(self::Modal);
```

You can then use the `Drago\Component\ModalHandle` and `Drago\Component\OffcanvasHandle` implementations:

```
#[Requires(ajax: true)] public function handleOpenModal(): void
{
	$this->modalComponent(self::Modal);
}

#[Requires(ajax: true)] public function handleOpenOffcanvas(): void
{
	$this->offCanvasComponent(self::Offcanvas);
}
```

You can pass the snippet name that should be redrawn, or create your own signal handler and redraw the related snippet manually.

```
#[Requires(ajax: true)] public function handleOpenModalWindow(): void
{
	$this->modalComponent();
	$this->redrawControl('...');
}
```

Use the component templates in Latte. If you need to redraw multiple blocks, add additional snippets inside the embedded template.

```
Open Offcanvas
{embed 'path/to/@offcanvas.latte', offcanvasId: $offcanvasId}
	{block title}Title{/block}
	{block body}
		{snippet offcanvas}
			...
		{/snippet}
	{/block}
{/embed}

Open Modal
{embed 'path/to/@modal.latte', modalId: $modalId}
	{block title}Title{/block}
	{block body}
		{snippet modal}
			...
		{/snippet}
	{/block}
	{block footer}
		{import 'path/to/@dismiss-button.latte'}
		{include buttonDismiss, type: 'modal'}
	{/block}
{/embed}
```

JavaScript setup
----------------

[](#javascript-setup)

Since the package is installed via Composer, add the following to your `package.json` to make the `drago-component` alias available in your bundler:

```
{
  "type": "module",
  "dependencies": {
    "drago-component": "file:vendor/drago-ex/component"
  }
}
```

Then run `npm install`.

```
import { BootstrapComponents } from 'drago-component';

naja.registerExtension(new BootstrapComponents());
```

Dropdown widget
---------------

[](#dropdown-widget)

The dropdown widget is a small Latte wrapper for Bootstrap dropdown menus. It is useful for compact navigation actions, language switchers, user menus, or theme controls.

Register the dropdown helper in your frontend entry point and import the package SCSS when you want the compact link-like menu style used by the widget:

```
import { BootstrapDropdowns } from 'drago-component';

naja.registerExtension(new BootstrapDropdowns());
```

Use the widget in Latte:

```
{embed 'path/to/@dropdown.latte', name: 'Menu', icon: 'fa-solid fa-bars', menu: 'end'}
	{block menu}
		{include item, name: 'Homepage', link: ':Front:Home:'}
		{include item, name: 'Administration', link: 'Admin:'}
		{include divider}
		{include item, name: 'Sign out', link: 'Sign:out'}
	{/block}
{/embed}
```

Available parameters:

- `name`: optional dropdown toggle label.
- `icon`: optional Font Awesome icon class.
- `menu`: optional Bootstrap menu alignment suffix, for example `end`, `lg-start`, or `lg-end`.

The `menu` value is appended to the Bootstrap `dropdown-menu-*` class, so `menu: 'end'` renders `dropdown-menu-end` and `menu: 'lg-start'` renders `dropdown-menu-lg-start`.

The widget keeps dropdown behavior on Bootstrap. The package SCSS aligns the toggle icon and label so it behaves visually like a compact navbar link.

For custom colors, prefer Bootstrap utilities and variables on your own layout instead of overriding the dropdown widget.

The widget provides helper blocks:

- `item`: renders a translated dropdown link.
- `divider`: renders a dropdown divider.

Tabs widget
-----------

[](#tabs-widget)

The tabs widget renders Bootstrap tabs from a small configuration array and keeps the content blocks in the same template. Bootstrap tab JavaScript must be available in the project.

```
{embed 'path/to/@tabs.latte',
	tabs: [
		[
			id: 'profile',
			label: 'Profile information',
			heading: 'Profile information',
			description: 'Update the name and email address used for your account.',
			block: 'profileInfo',
		],
		[
			id: 'password',
			label: 'Change password',
			heading: 'Change password',
			description: 'Use a strong password to keep your account secure.',
			block: 'changePassword',
		],
	],
	active: 'profile',
	class: 'card',
	headerClass: 'px-3 pt-3',
	contentClass: 'p-4'
}
	{block profileInfo}
		{control profile}
	{/block}

	{block changePassword}
		{control password}
	{/block}
{/embed}
```

Each tab item supports:

- `id`: unique tab identifier.
- `label`: translated tab label.
- `block`: block name rendered as tab content.
- `class`: optional class for the tab pane.
- `heading`: optional translated heading above the tab content.
- `description`: optional translated description below the heading.
- `headingClass`: optional heading class.
- `descriptionClass`: optional description class.

Widget parameters:

- `tabs`: list of tab definitions.
- `active`: active tab id; when omitted, the first tab is active.
- `class`: optional wrapper class.
- `headerClass`: optional class for the tabs header.
- `contentClass`: optional class for the tab content wrapper.

###  Health Score

47

—

FairBetter than 93% of packages

Maintenance89

Actively maintained with recent releases

Popularity14

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity62

Established project with proven stability

 Bus Factor1

Top contributor holds 100% 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 ~22 days

Recently: every ~3 days

Total

21

Last Release

58d ago

Major Versions

v1.0.8 → v2.0.02026-05-30

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/5998929?v=4)[Zdeněk Papučík](/maintainers/accgit)[@accgit](https://github.com/accgit)

---

Top Contributors

[![accgit](https://avatars.githubusercontent.com/u/5998929?v=4)](https://github.com/accgit "accgit (111 commits)")

### Embed Badge

![Health badge](/badges/drago-ex-component/health.svg)

```
[![Health](https://phpackages.com/badges/drago-ex-component/health.svg)](https://phpackages.com/packages/drago-ex-component)
```

###  Alternatives

[nette/code-checker

✅ Nette CodeChecker: A simple tool to check source code against a set of Nette coding standards.

881.7M6](/packages/nette-code-checker)[tomaj/nette-api

Nette api

36276.9k8](/packages/tomaj-nette-api)[nette/web-project

Nette: Standard Web Project

11093.7k](/packages/nette-web-project)

PHPackages © 2026

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