diff --git a/src/Elements/BodyComponents/MjNavbar.php b/src/Elements/BodyComponents/MjNavbar.php
new file mode 100644
index 0000000..baf921b
--- /dev/null
+++ b/src/Elements/BodyComponents/MjNavbar.php
@@ -0,0 +1,31 @@
+ ['unit' => 'string', 'type' => 'string', 'default_value' => 'center'],
+ 'base-url' => ['unit' => 'string', 'type' => 'string', 'default_value' => ''],
+ ];
+
+ protected array $defaultAttributes = ['align' => 'center'];
+
+ public function render(): string
+ {
+ $children = $this->getChildren() ?? [];
+ return $this->renderChildren($children, []);
+ }
+
+ public function getStyles(): array
+ {
+ return [];
+ }
+}
diff --git a/src/Elements/BodyComponents/MjNavbarLink.php b/src/Elements/BodyComponents/MjNavbarLink.php
new file mode 100644
index 0000000..496aa07
--- /dev/null
+++ b/src/Elements/BodyComponents/MjNavbarLink.php
@@ -0,0 +1,53 @@
+ ['unit' => 'color', 'type' => 'color', 'default_value' => '#000000'],
+ 'font-family' => [
+ 'unit' => 'string',
+ 'type' => 'string',
+ 'default_value' => 'Ubuntu, Helvetica, Arial, sans-serif',
+ ],
+ 'font-size' => ['unit' => 'px', 'type' => 'string', 'default_value' => '13px'],
+ 'href' => ['unit' => 'string', 'type' => 'string', 'default_value' => ''],
+ 'padding' => ['unit' => 'px', 'type' => 'string', 'default_value' => '15px 10px'],
+ 'target' => ['unit' => 'string', 'type' => 'string', 'default_value' => '_blank'],
+ ];
+
+ protected array $defaultAttributes = [
+ 'color' => '#000000',
+ 'font-size' => '13px',
+ 'padding' => '15px 10px',
+ 'target' => '_blank',
+ ];
+
+ public function render(): string
+ {
+ $href = $this->getAttribute('href');
+ $target = $this->getAttribute('target');
+ $aAttributes = $this->getHtmlAttributes(['style' => 'a']);
+ $content = $this->getContent();
+ return "$content";
+ }
+
+ public function getStyles(): array
+ {
+ return ['a' => [
+ 'color' => $this->getAttribute('color'),
+ 'font-family' => $this->getAttribute('font-family'),
+ 'font-size' => $this->getAttribute('font-size'),
+ 'padding' => $this->getAttribute('padding'),
+ 'text-decoration' => 'none',
+ ]];
+ }
+}
diff --git a/tests/Unit/Elements/BodyComponents/MjNavbarTest.php b/tests/Unit/Elements/BodyComponents/MjNavbarTest.php
new file mode 100644
index 0000000..d5fdcda
--- /dev/null
+++ b/tests/Unit/Elements/BodyComponents/MjNavbarTest.php
@@ -0,0 +1,13 @@
+ expect((new MjNavbar())->getTagName())->toBe('mj-navbar'));
+it('MjNavbarLink has correct tag name', fn() => expect((new MjNavbarLink())->getTagName())->toBe('mj-navbar-link'));
+it('MjNavbarLink renders link', function () {
+ $element = new MjNavbarLink(['href' => 'test.html'], 'Link Text');
+ expect($element->render())->toContain('toContain('test.html')->toContain('Link Text');
+});